Webpack is a pain to use, so what are the things we need to be aware of? <1> Release strategy for WebPack

  1. In actual development, there are generally two sets of project schemes:
  • One is the project during development, including test files, test data, development tools, test tools and other related configurations, which is conducive to the development and testing of the project, but these files are only used for development, and need to be removed when the project is released.
  • The other is during the deployment of the project, excluding those customers do not use the test data test tools and files, more pure, reduce the volume of the project after release, conducive to installation and deployment!
  1. To meet our publishing policy, we need to create a new configuration file namedwebpack.publish.config.jsThat will bewebpack.config.jsCopy the config from the config file and remove some development config items:

  • Delete the devServer node:

    devServer: { hot: true, open: true, port: 4321 }

  • Delete the hot update plugin from the plugins node:

    new webpack.HotModuleReplacementPlugin()

  1. Modify url-loader to place images under a unified images folder:

    { test: /.(png|jpg|gif)$/, use: ‘url-loader? limit=43959&name=images/[name].[ext]’ }

Or use the img-prefix with a 7-bit hash name:

{ test: /\.(png|jpg|gif)$/, use: 'url-loader? limit=43959&name=images/img-[hash:7].[ext]' }Copy the code

  1. Add the dev command under the script node in package.json to specify the configuration file to read when webpack starts with –config:

    “pub”: “webpack –config webpack.publish.config.js”

<2> Delete the dist directory each time you rebuild

  1. Run CNPM I clean-webpack-plugin –save-dev

  2. Introduce this plugin in the header:

    var cleanWebpackPlugin = require(‘clean-webpack-plugin’);

  3. Use this plugin under the plugins node:

    new cleanWebpackPlugin([‘dist’])

Separate third party package renovationwebpack.publish.config.js

  1. Modify the entry node as follows:

    Entry: {app: path.resolve(__dirname, ‘SRC /js/main.js’), // Portals to your own code, vendors: [‘jquery’] // Portals to third-party packages to be unbundled}

  2. Add a plug-in under the plugins node:

    New to webpack.optimize.Com monsChunkPlugin ({/ / out of third-party packages plugin name: ‘vendors’, // Specify the entry name of the vendor package to be extracted filename:’vendors. Js’ // The name of the public module to be extracted})

  3. The html-webpack-plugin automatically introduces the extracted third-party packages when generating the index. HTML file!

Optimized compression JS

Add to the plugins array:

New webpack. Optimize. UglifyJsPlugin ({/ / optimized compression JS compress: {warnings: false / / remove warning}}). New webpack.defineplugin ({// set it as a product launch environment, further compress JS code 'process.env.node_env ': '"production"'})Copy the code

<3> Optimize the compression of HTML files in the htmlWebpackPlugin plugin under the plugins node, add minify child node:

Minify :{// Collapse HTML code collapseWhitespace:true, // Merge white space character removeComments:true, / / remove annotation removeAttributeQuotes: true / / remove attributes in quotation marks}Copy the code

For other optimization items, see html-minifier – github

Extracting CSS files

  1. Run NPM install –save-dev extract-text-webpack-plugin to install the plug-in that extracts the CSS file.

  2. Importing a plug-in in a configuration file:

    const ExtractTextPlugin = require(“extract-text-webpack-plugin”);

  3. Modify the loader of the CSS and Sass as follows:

    { test: /.css/, use: ExtractTextPlugin.extract({ fallback: “style-loader”, use: [‘css-loader’, ‘sass-loader’], publicPath: ‘.. /’ // Set image path})}

  4. Add a plug-in under the plugins node:

    New ExtractTextPlugin(” CSS /styles.css”), // Extract CSS file plug-in

< 4 > compression extracted the CSS file (https://github.com/NMFR/optimize-css-assets-webpack-plugin)

  1. Run CNPM I optimize- CSS-assets -webpack-plugin –save-dev to install the plugin to the development dependency.

  2. Import the plug-in in the header of the configuration file:

    var OptimizeCssAssetsPlugin = require(‘optimize-css-assets-webpack-plugin’);

  3. Add a plug-in under the plugins node:

    New OptimizeCssAssetsPlugin() // Compression CSS file plug-in

<5> Related articles

  1. Sass basic tutorial
  2. webpack-dev-server
  3. You have not accepted the license agreements of the following

Waiter, pack a Webpack, yes, a one-click generated one.