Webpack configuration: CSS file packaging and JS compression packaging

One, CSS file packaging

1. Create a new CSS file under SRC, create a new index.css file under the CSS file, and enter the following code

body{    color:red;    Font-size:20px;}

2, CSS set up, need to introduce to the import file, where we introduced into the Index.js

 from ' ./css/index.css ' ;d ocument.write ("It works. ");

3. Install Style-loader and Css-loader in terminal

4. After installation, we start to configure module options in Webpack.config.js

// modules: such as interpreting CSS, how images are converted, compressed module:{    rules:[        {            test:/\.css$/,            use:['style-loader ','css-loader'        }    ]},

5, in the terminal input NPM run server, you can see the effect has a style.

Second, JS compression packaging

1, first introduced in the Webpack.config.js

const uglify = require ('uglifyjs-webpack-plugin');

2. Then configure in plugins

// plugins for the production of templates and functions plugins:[    new  uglify ()],//   plugin, multiple plugins, so is an array

ConstPath = require ('Path');ConstUglify = require ('Uglifyjs-webpack-plugin'); Module.exports={    //configuration entries for portal filesentry:{Entry:'./src/index.js'    },    //configuration items for export filesoutput:{//The path of the output, using the node syntaxPath:path.resolve (__dirname,'Dist'),        //the file name of the outputFileName'Bundle.js'}, Mode:"Development",    //modules: such as interpreting CSS, how images are converted, compressedmodule:{rules:[{test:/\.css$/, use:['Style-loader','Css-loader']            }        ]    },    //plugins for the production of templates and functionsplugins:[Newuglify ()],//plug-ins, multiple plugins, so are arrays//Configuring the Webpack development Services featuredevserver:{contentBase:path.resolve (__dirname,'Dist'),//The directory where the page loaded by the local server is locatedHost'192.168.118.221', Compress:true, Port:8081    }//Configuring the Webpack service}

3, in the terminal input Webpack, you will find that the JS code has been compressed

Webpack configuration: CSS file packaging and JS compression packaging