preface

Don’t talk about conceptual things, directly into the actual combat development, the purpose of letting you understand in practice, and then to understand the concept, will get twice the result with half the effort, reduce the cost of reading and psychological pressure. In order to read the context more clearly, I will follow the 3W1H principle.

  • What do ——– do
  • Who ——– who will do it
  • When ——–
  • How to ———

background

The last technical article in 2019 is also the latest version of Webpack 4.41.5. I hope this article can let you really use Webpack 4.0+, and then according to their own understanding and the official website articles, referring to other conceptual articles, we will start to implement our Webpack scaffolding together. Let’s cross 2019 and welcome 2020.

Simple definition

In essence, Webpack is a static Module bundler for modern JavaScript applications. When WebPack works with an application, it recursively builds a Dependency graph containing every module the application needs, and then packages all of those modules into one or more bundles. Above if you do not know what meaning, it does not matter, we directly into the actual combat, follow this article to do it again, or all the demo download to the local run again, you will understand, if still do not understand the harassment, after the attention to me, follow-up answers.

In actual combat

NPX webpack packaging

  • What: Package resources
  • who: npx
  • When: When the NPX webpack script is executed to package resources
  • How: Execute NPX webpack under the current project command tool
  • Project address: webpack-Demo-4.41.5-napx-webpack

Configure WebPack packaging

  • What: Package resources in the configured mode
  • Configures the command line in script under who: package.json
  • When: When NPM run build is run and resources are packaged
  • how:
"scripts": {
    "build": "webpack"
}
Copy the code
  • Project address: Webpack-Demo-4.41.5-loader-CSS

Package resources (CSS, IMG, FONT, other files)

  • What: Package file resources
  • Who: loader module
  • When: is configured in the webpack execution file webpack.config.js to package resources
  • how:
module: {
     rules: [{test: /\.css$/.// Load the style and embed it in the HTML page
               use: [
                 'style-loader'.'css-loader'] {},test: /\.(png|svg|jpg|gif|jpeg)$/.// Load the image
              use: [
                'file-loader'] {},test: /\.(woff|woff2|eot|ttf|otf)$/.// Load the font library
               use: {
                loader: "url-loader".options: {
                  limit: 50000}}}, {test: /\.(csv|tsv)$/.// Load data in TSV format
                use: [
                'csv-loader'] {},test: /\.xml$/.// Load the XML format
                use: [
                'xml-loader']]}}Copy the code
  • Project address: webpack-Demo-4.41.5-loader-png-font -text

Manual configuration file packaging

  • What: Manually configure multiple file packaging
  • Who: Specifies the name of the packed file in the entry file index. HTML
  • When: Configates the output file in webpack.config.js and executes the packaged output
  • how:
// webpack.config.js
const path = require('path');
module.exports = { // Multiple files are packaged at the same time to generate multiple corresponding packages
  entry: {
    app: './src/index.js'.print: './src/print.js'
  },
  output: {
    filename: '[name].bundle.js'.// Name dynamically iterates through the name of the entry
    path: path.resolve(__dirname, 'dist')}};// index.html SRC Set this parameter manually according to the entry<! doctype html><html>
  <head>
    <title>Output Management</title>
    <script src="./print.bundle.js"></script>
  </head>
  <body>
    <script src="./app.bundle.js"></script>
  </body>
</html>
Copy the code
  • Project address: Webpack-Demo-4.41.5-noPlugin

If the entry file configuration name changes or multiple entries are deleted, the script in index. HTML will change as well

The plug-in package

  • What: Automatic packaging of output files using plug-ins
  • Who: Plugin HtmlWebpackPlugin overwrites the original file, and another plugin CleanWebpackPlugin removes the dist file
  • When: When NPM run build is packaged, the corresponding plug-in is executed
  • how:
  plugins: [
    new CleanWebpackPlugin(),// The latest version
    new HtmlWebpackPlugin({ // Dynamically generate index.html to override the original index.html
      title: 'Output Management from dragon'})]Copy the code
  • Project address: Webpack-Demo-4.41.5-plugins

Thermal load HMR

  • What: Code changes, dynamic local loading of HMR (module hot replacement)
  • Who: the plugin HotModuleReplacementPlugin, NamedModulesPlugin webpack
  • When: NPM run dev starts the local development service
  • How: Install the corresponding plug-in and import it
    new webpack.NamedModulesPlugin(), // Plugins that come with Webpack to view patch dependencies
    new webpack.HotModuleReplacementPlugin()
Copy the code
  • Project address: Webpack-Demo-4.41.5-dev-hMR

Environment separation and merger

  • What: For maintenance purposes, separate the development and production environments and the common parts, and then package them using the module Webpack-Merge
  • Who: The webpack-merge module does an environment merge
  • When: when different scripts are run, NPM run dev, NPM run build
  • How: Install the corresponding plug-in and import it
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');
module.exports = merge(common, {
     devtool: 'inline-source-map'.devServer: {
       contentBase: './dist'.hot: true
     },
     plugins: [
      new webpack.NamedModulesPlugin(), // Plugins that come with Webpack to view patch dependencies
      new webpack.HotModuleReplacementPlugin()
    ]
});
Copy the code
  • Project address: webpack-Demo-4.41.5-webpack-merge

Split code packaging

  • What: When we refer to packages or code repeatedly, we need to package them separately to reduce the size of packages and improve build efficiency
  • Who: Optimization comes with WebPackage 4.0
  • When: NPM run builds
  • How: Configure parameters in webpack.config
   optimization: { // Split code to extract common reference packages
    splitChunks: {
      cacheGroups: {
        commons: {
          name: 'commons'.chunks: 'initial'.// initial initial block async loads all on demand
          minChunks: 1 // The minimum number of references}}}}Copy the code
  • Project address: webpack-Demo-4.41.5-webpack-splitChunkSplugin

conclusion

The above is the actual part of this paper, each part has a complete operational project, diy effect will be better.

In the next section, I’ll talk about optimizing WebPack performance and developing a scaffolding for multiple technology stacks.

Through the above introduction, I hope to give you some constructive reference, there is any problem welcome harassment, join [front-end assault], long press the TWO-DIMENSIONAL code attention, or wechat search front-end assault together to discuss the boundary of the front end

Welcome to [front-end assault] Falcon assault, grasp the nettle, looking forward to your participation…