Simple setup process

1. The NPM initialization

Enter the project folder on the CMD command line

npm init -y
Copy the code

Package. json and package-lock.json files are automatically generated

2. Create a project file

new

-dist
-src
    -css
    -js
    -img
    -demo
-webpack.config.js
Copy the code

3. The Webpack configuration

Install Webpack

NPM I webpack webpack-cli -d or NPM install -d webpack-cliCopy the code

Automatically generate the node_modules folder

Webpack.config.js entry configuration

module.exports = {
  entry: {
    page1: "./src/pages/page1/index.js",
    page2: "./src/pages/page2/index.js",
    // ...
  },
Copy the code

Webpack.config.js outputs the configuration

// Webpack project absolute path const {resolve} = require('path') module.exports = {entry: {page1: "./src/pages/page1/index.js", page2: "./src/pages/page2/index.js", // ... }, output: {path: path.resolve(__dirname, "./dist"), //name = page1 page2 filename: "[name]/index.js",},Copy the code

Plug-in installation + configuration

Jquery plugin

npm i -D jquery
Copy the code

Babel plug-in

npm i -D babel-loader @babel/core @babel/preset-env
Copy the code

module.exports = {
  ...
  module: {
    rules: [{// Matches the file type
        test: /\.jsx? $/.// Do not load these folders
        exclude: /(node_modules|bower_components)/.// Which loaders to use
        use: {
          loader: 'babel-loader'.options: {
            presets: ['@babel/preset-env']}}}]},Copy the code

CSS – loader style – loader plug-in

npm i -D css-loader style-loader
Copy the code

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

File – loader url – loader plug-in

npm i -D file-loader url-loader
Copy the code

module: {
        rules: [{test:/\.(jpg|png|gif|PNG)$/,
                loader:'url-loader'.options: {
                    limit: 8 * 1024.name:'[hash:10].[ext]'
                },
                //include is obtained from that folder
                //include: [resolve('static'),resolve('src')],}},Copy the code

HTML – webpack – plugin plug-in

npm i -D html-webpack-plugin
Copy the code

// Generate a single page
const  HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
        new HtmlWebpackPlugin({
            filename: "page1/index.html".// Select Entry to import the entry file
            chunks: ['page1], template: "./src/demo/page/page1/index.html" }), new HtmlWebpackPlugin({ filename: "Page2 /index.html", // select the entry file to introduce chunks:page2],
            template: "./src/demo/page/page2/index.html"
        }),
        new HtmlWebpackPlugin({
            filename: "page3/index.html".// Select Entry to import the entry file
            chunks: ['page3], template: "./src/demo/page/page3/index.html" }), ],Copy the code

The clean – webpack – plugins plugin

npm i -D clean-webpack-plugin
Copy the code

const {CleanWebpackPlugin} = require('clean-webpack-plugin')

plugins: [
       new CleanWebpackPlugin()
    ],
Copy the code

Webpack dev – server plug-ins

npm i -D webpack-dev-server
Copy the code

"scripts": {
    "dev": "webpack --mode development"."build": "webpack --mode production"."start": "webpack-dev-server --mode development"
  },
Copy the code

devServer: {
        // Server base directory
        contentBase:resolve(__dirname,'dist'),
        compress:true./ / port
        port:8080.// Automatically open the page
        open:true
    },
Copy the code

Added knowledge: blog.csdn.net/lunahaijiao…