Webpack3 Finishing (first section/full)

One, CSS files packaged into JS ( three ways of loader)

 //  The first way: use using directly.         module: {rules: [{test: /\.css$/ ' Style-loader ', ' css-loader '  //  The Third way: using the Use+loader notation:   module: {rules: [{test: /\.css$/ "Style-loader" }, {loader:  "Css-loade R "}]}]}  

Second, compression JS code (although UGLIFYJS is a plug-in, but the Webpack version of the default integration, do not need to install again.) ）

Const Path=require (' path '); Const uglify= Require (' Uglifyjs-webpack-plugin '); Module.exports={entry:{entry:'./src/main.js ', //configuration of the ingress file }, output:{ //Export file configuration item path:path.resolve (__dirname,' Dist '),  //The path of the output  filename:' [Name].js '//output file name ([name] means that according to the name of the portal file, packaged into the same name, there are several portal files, you can package a few files)}, module:{ //plug-in for production templates and various functions rules:[{test:/\.css$/, use: ["Style-loader", "Css-loader"]}]}, plugins:[Newuglify ()], devserver:{contentBase:path.resolve (__dirname,' Dist '), //Set basic directory Structure host:' 192.168.0.144 ', //The IP address of the server, you can use IP or localhost (recommended for native IP) compress:true, //service-side compression whether to open port:3000//Configure service port number (not recommended 8080 easy to use)    }}

Note: To perform webpack-dev-server is to use NPM install Webpack-dev-server–save-dev to download the installation. Once downloaded, you need to configure Devserver.
(need to be configured below Package.json below)

　"Scripts": {
"Server": "Webpack-dev-server"
}

After the configuration is saved, enter NPM run server in the terminal to open the server to see the page results. (the corresponding file also has the basic configuration of plug-in in Webpack.prod.conf.js)

CSS automatically joins the prefix plug-in configuration: (The root directory below the psotcss.js for the following configuration):

Module.exports = {    plugins: [        require (' autoprefixer ')    ]}

this one simple   Postcss's configuration, introduced the Autoprefixer plugin. Let Postcss have the ability to add prefixes, which adds the corresponding CSS3 attribute prefixes based on can I use. Then configure loader

{
Test:/\.css$/,
Use: [{
Loader: "Style-loader"
}, {
Loader: "Css-loader",
Options: {
Modules:true
}
}, {
Loader: "Postcss-loader"
}]
}

Webpack3 Finishing (first section/full)