1、安裝webpakck

npm install --save-dev webpack webpack-cli

剛剛安裝的版本是 5.73.0

2、新建config配置文件夾

在根目錄下創(chuàng)建一個webpack.config文件夾，在此文件夾下創(chuàng)建三個配置文件

• webpack.common.config.js -- 公共配置文件
• webpack.prod.config.js -- 生產(chǎn)環(huán)境配置文件
• webapck.dev.config.js -- 開發(fā)環(huán)境配置文件

在根目錄下再創(chuàng)建一個src文件夾，新建 app.js文件

3、在webpack.common.config.js文件中輸入以下代碼

const path = require('path');

module.exports = {
  entry: {
    app: './src/app.js',
  },
  output: {
    filename: 'js/bundle.js',
    path: path.resolve(__dirname, '../dist'),
  },
};

4、安裝webpack-merge

用于合并webpack配置

npm install --save-dev webpack-merge

5、配置開發(fā)環(huán)境，生產(chǎn)環(huán)境webpack

const path = require('path');

module.exports = {
    entry: {
        app: './src/app.js'
    },

    output: {
        filename: 'js/bundle.js',
        path: path.resolve(__dirname, '../dist')
    }
}

6、安裝React

npm install --save react react-dom

7、修改app.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>my-project!!!!!</div>
    );
  }
}

export default App;

8、在src下新增index.js，代碼如下

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app.jsx';

ReactDOM.render(<App />, document.getElementById('root'))

9、修改webpack.common.js配置文件入口為：index.js

10、安裝bable

npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime

各個bable的作用：

• babel-loader：使用 Babel 和 webpack 來轉(zhuǎn)譯 JavaScript 文件。
• @babel/core：babel 的核心模塊
• @babel/preset-env：轉(zhuǎn)譯 ES2015+的語法
• @babel/preset-react：轉(zhuǎn)譯 react 的 JSX
• @babel/plugin-proposal-class-properties：用來編譯類(class)
• @babel/plugin-transform-runtime：防止污染全局，代碼復用和減少打包體積

11、在webpack.common.js加入bable配置

const path = require('path');

module.exports = {
    entry: {
        app: './src/index.js'
    },

    output: {
        filename: 'js/bundle.js',
        path: path.resolve(__dirname, '../dist')
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react'],
                        plugins: [
                            '@babel/plugin-transform-runtime',
                            '@babel/plugin-proposal-class-properties'
                        ]
                    }
                }
            }
        ]
    }
}

12、安裝HtmlWebpackPlugin

npm install --save-dev html-webpack-plugin

13、配置webpack.config.js

const { merge } = require('webpack-merge');

const common = require('./webpack.common.config');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(common, {
    mode: 'production',
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html',
            inject: 'body',
            minify: {
                removeComments: true
            }
        })
    ]
})

• template：基于我們自己定義的 html 文件為模板生成 html 文件
• filename：打包之后的 html 文件名字
• inject：將 js 文件注入到 body 最底部
• minify：壓縮 html 文件時的配置
• removeComments：去除注釋

14、生成文件添加hash值

    output: {
        filename: 'js/[name]-bundle-[hash:8].js',
        path: path.resolve(__dirname, '../dist')
    }

• [name] 打包入口名稱
• [hash] 哈希串默認長度為 20，:6 為取前六位

15、打包前清理dist目錄（新版本可以不引入插件）

npm install --save-dev clean-webpack-plugin

代碼如下：

const { merge } = require('webpack-merge');

const common = require('./webpack.common.config');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = merge(common, {
    mode: 'production',
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html',
            inject: 'body',
            minify: {
                removeComments: true
            }
        }),
        new CleanWebpackPlugin()
    ]
})

注意：新版可配置output對象屬性clean為true，來清理

16、安裝webpack-dev-server

npm install -D webpack-dev-server

修改webpack.dev.js

const { merge } = require('webpack-merge');
const path = require('path')
const common = require('./webpack.common.config');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(common, {
    mode: 'development',
    devServer: {
        // 新版本不再支持contentBase，而是使用static，路徑指定有問題
        // contentBase: path.join(__dirname, 'dist'),
        prot: 8888,
        compress: true，
        static: {
           directory: path.join(__dirname, '/public')
        }
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'public/index.html',
            inject: 'body',
            hash: false
        })
    ]
})

• contentBase: 啟服務的文件
• port: 端口號
• compress: 為每個靜態(tài)文件開啟[gzip壓縮]

17、樣式配置

安裝style-loader、css-loader

npm install --save-dev style-loader css-loader

新增配置

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

18、打包css

安裝插件

npm i -D mini-css-extract-plugin

配置打包

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

在插件里面新增配置

 new MiniCssExtractPlugin({
     filename: 'style/[name].[hash].css'
 })

19、壓縮打包出來的css文件

安裝依賴

npm i -D css-minimizer-webpack-plugin

配置壓縮

    optimization: {
        minimize: true,
        minimizer: [new CssMinizerPlugin()]
    },

20、配置less、sass

安裝依賴

npm i less less-loader -D
npm i -D sass sass-loader node-sass

配置less，sass

           {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.s[ac]ss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }

21、壓縮js代碼

下載插件

npm i -D terser-webpack-plugin

配置壓縮文件

    optimization: {
        minimize: true,
        minimizer: [
            new CssMinizerPlugin(),
            new TerserPlugin({
                terserOptions: {
                    compress: {
                        drop_console: true
                    }
                }
            })
        ]
    },

22、配置css瀏覽器前綴

安裝依賴

npm i -D postcss postcss-loader autoprefixer

在根目錄，新增postcss.config.js文件，代碼如下：

module.exports = {
    plugins: [
        require('autoprefixer')({
            overrideBrowserslist: [
                'Android 4.1',
                'iOS 7.1',
                'Chrome > 31',
                'ff > 31',
                'ie >= 8',
            ]
        })
    ]
};

在css-loader后面新加postcss-loader

23、配置圖片load，使用url-loader

安裝url-loader，url-loader依賴于file-loader，所以需要安裝兩個loader

npm i -D file-loader url-loader

配置代碼

            {
                test: /\.(png|jpe?g|gif)$/,
                loader: 'url-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'images',
                    limit: 8192
                }
            }

• 后綴為 jpg,png,gif 的文件，使用 url-loader 進行預處理；
• options 中的[name].[ext]表示，輸出的文件名為 原來的文件名；
• outputPath 是輸出到 dist 目錄下的路徑，即 dist/images；
• limit: 8192，指定文件的最大體積（以字節(jié)為單位）。 如果文件體積等于或大于限制，默認情況下將使用 file-loader 并將所有參數(shù)傳遞給它。若是小于了 8kb，將圖片打包成 base64 的圖片格式插入到 bundle.js 文件中，這樣做的好處是，減少了 http 請求，但是如果文件過大，js 文件也會過大，得不償失，這是為什么有 limit 的原因。

24、配置source-map

devtool: 'eval-cheap-module-source-map',

25、配置resolve.alias

 resolve: {
        extensions: ['.js', '.jsx', '.json', '.less', '.scss'],
        modules: [ path.resolve(__dirname, '../src'), 'node_modules' ],
        alias: {
          '@': path.join(__dirname, '../src')
        }
      }

• extensions: 如果有多個文件有相同的名字，但后綴名不同，webpack 會解析列在數(shù)組首位的后綴的文件 并跳過其余的后綴。使用此選項會 覆蓋默認數(shù)組，這就意味著 webpack 將不再嘗試使用默認擴展來解析模塊。
• modules: 如果你想要添加一個目錄到模塊搜索目錄，此目錄優(yōu)先于 node_modules/ 搜索。
• alias: 創(chuàng)建 import 或 require 的別名，來確保模塊引入變得更簡單。例如，一些位于 src/ 文件夾下的常用模塊