Webpack Build Tool (V3.10.0)

background

A long time ago sorted out a, now has used v4, as their own a record of it ~

You can go to the official website for the latest version.

version

v3.10.0

Introduction to the

Webpack is an open source front-end packaging tool. Treat various static resources as modules and generate optimized code from them.

Difference between Webpack and Grunt/Gulp

• Webpack is a Module bundler that helps you take JavaScript and style sheets ready for deployment and convert them into a usable format for your browser.
• Grunt/Gulp is a task runner that automates common development tasks such as project checking (Lint), building (build), and testing (test).

concept

• The entrance (entry)
• Output (output)
• loader
• The plug-in (plugins)

There are several ways to use Loader

• Configuration (recommended) : Specify loader in the webpack.config.js file.

    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' }
        ]
      }
    ]
  }

Copy the code

• Inline: Explicitly specify the loader in each import statement.

import Styles from 'style-loader! css-loader? modules! ./styles.css';
Copy the code

• CLI: Specify them in a shell command.

webpack --module-bind jade-loader --module-bind 'css=style-loader! css-loader'
Copy the code

The installation

Yarn add webpack //yarn NPM install --save-dev webpack // NPM Install the latest version NPM install --save-dev webpack@<version> // NPM install the specific version NPM install webpack@beta // Install the betaCopy the code

Single entry file

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader'.'css-loader'}]}};Copy the code

Multientry file

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: {
    app: './src/index.js'.print: './src/print.js'
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Output Management'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')}};Copy the code

The plug-in

• Html-webpack-plugin // Pack HTML
• Clean-webpack-plugin // Clean files

Devtool

Doc.webpack-china.org/configurati…

Hot update

1. Use the observer pattern package.json

"scripts": {
    "watch": "webpack --watch"
 }
Copy the code

2. Provide a simple Web server with webpack-dev-server and live reloading

 devServer: {
   contentBase: './dist'
 },
Copy the code

The above configuration tells webpack-dev-server to set up the service under localhost:8080 and make the files in the dist directory accessible.

 "start": "webpack-dev-server --open".Copy the code

3. Use the webpack – dev – middleware

Webpack-dev-middleware is a middleware wrapper that publishes webpack-processed files to a server. Webpack-dev-server uses Webpack-dev-Middleware internally, however, it can be provided as a separate package, allowing for more customization to fulfill more needs. Webpack-dev-middleware works with Express Server

server":"node server.js"
Copy the code

4. Enable the HMR

devServer: {
   contentBase: './dist',
   hot: true
}

new webpack.HotModuleReplacementPlugin()
Copy the code

Tree Shaking

Tree Shaking is when you remove dead-code from JavaScript context, “dead code” is identified by webpack builds, but not removed. To delete the minifier, add the minifier UglifyJSPlugin

Yarn add uglifyjs-webpack-plugin or NPM install --save-dev uglifyjs-webpack-pluginCopy the code

Production environment construction

• In the development environment, we need live reloading or hot Module replacement capabilities, source Map, and localhost Server.

• Production environment, aiming for smaller bundles and lighter source maps

• Webpack-merge — Keeps a “generic” configuration

webpack.common.js
webpack.dev.js
webpack.prod.js
Copy the code

 "start": "webpack-dev-server --open --config webpack.dev.js"."server": "node server.js"."build": "webpack --config webpack.prod.js"
Copy the code

The separation

There are three common ways to separate code:

• Entry starting point: Manually detach code using the Entry configuration.
• Prevent duplication: Use CommonsChunkPlugin to deduplicate and separate chunks.
• Dynamic import: Separation of code through inline function calls to modules.

The cache

• Replace the filename by using output.filename

filename: '[name].[chunkhash].js'.Copy the code

• To extract the templates

Building performance

• Keep versions up to date
• Loaders Applies Loaders to the minimum number of necessary modules

include: path.resolve(__dirname, "src")
Copy the code