Webpack packaging principles

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

Webpack has four core concepts

The entrance to the

Webpack. Config. Js in the configuration

module.exports = {
  entry: './src/index.js'
};
Copy the code

The second output

Webpack. Config. Js in the configuration

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.min.js'
  }
};
Copy the code

Three loader

Webpack Loader converts all types of files into modules that can be directly referenced by the dependency graph of the application

Four plug-ins (plugins)

Add the plugins you want to use to the plugins array with require(). Most plugins can be customized with options. You can also use the same plug-in multiple times for different purposes in a configuration file by using the new operator to create an instance of it.

Webpack —— build project

1. Initialization

NPM init -y install webpack NPM I webpack_dome webpack-cli -d

2. Webpack configuration

Create a SRC folder in the root directory and create the index.js file in SRC

console.log("hello world")
Copy the code

Create and configure the webpack.config.js file webpack.config.js file

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.min.js'
  }
};
Copy the code

3. The package configuration

Configure the package.json file, Adding ‘build’ to scripts makes it possible to run NPM run build and execute webpack directly. The dist folder will be generated in the root directory, which contains the generated files. NPM install –save-dev express webpack-dev-middleware, add ‘start’ to run NPM run start to run webpack-dev-server directly. Package. The json file

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server",
    "build": "webpack"
  },
Copy the code

4. Delete the old files

To install dependencies, run NPM install clean-webpack-plugin –save-dev. Modify the webpack.config.js file configuration

const CleanWebpackPlugin = require('clean-webpack-plugin') const path = require('path') module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'main.min.js' }, plugins: [// By default, this plugin will delete all files in the webpack output.path directory. New CleanWebpackPlugin(),]}Copy the code

5. Files are imported into HTML

Manual import mode

Create an index. HTML file and manually import the packaged JS file

Automatic lead-in mode

Run NPM I html-webpack-plugin –save-dev to install dependencies. Create a new index.ejs file

<! DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> </body> </html>Copy the code

Modify the webpack.config.js file configuration

const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin') const path = require('path') module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'main.min.js' }, plugins: [new HtmlWebpackPlugin({// package output HTML title: 'new HTML', // Generate HTML title minify: {// compress HTML file removeComments: CollapseWhitespace: true, // Delete white space and line breaks minifyCSS: true // Compress inline CSS}, filename: collapseWhitespace: true 'index.html', // generated filename template: 'index.ejs' // Generate HTML files from this template}), // By default, this plugin will remove all files in the webpack Output. path directory. New CleanWebpackPlugin(),]}Copy the code

Rerun the NPM run build to generate the new dist package, which generates a new index.html file and automatically introduces the index.min.js file.

6. Automatically open the browser and support hot update

Run the NPM I open-browser-webpack-plugin webpack-dev-server –save-dev command to install dependencies. Modify the webpack.config.js configuration

<! DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> </body> </html>Copy the code