前言

這篇文章主要給大家介紹的是webpack從零開始搭建，簡單介紹react單頁多頁配置。我的文章，歡迎點贊:

單頁應用

多頁應用

webpack核心模塊：

entry：入口文件（你要打包，就告訴我打包哪些）

output：出口文件（我打包完了，給你放到哪里）

module：模塊（放lorder，編譯瀏覽器不認識的東西）

plugins：插件（輔助開發，提高開發效率）

devServer：服務器（webpack提供的本地服務器）

mode：模式，分為開發模式、生產模式。

webpack基本配置

一、創建文件/初始化/安裝webpack

mkdir webpack4 && cd webpack4  // mkdir創建文件夾
npm init -y  // npm init生成package.json 
npm i webpack webpack-cli  --save-dev

在這里用npm init -y，加-y是之后所有選擇都選yes，大家可以試下npm init，感受它們的區別。
大家可以看下package.json的最基本的配置。

此時我們npm run build，會有兩個錯誤：
1、error: 沒有入口文件
2、warning: 建議設置 mode 選項（webpack4推薦使用的，development本地開發，production生產環境）。

二、entry & output

1、我們在根目錄建一個src文件夾，src文件夾下建index.js。
2、然后npm run build打包成功。
因為webpack4默認自動配置了入口文件和出口文件。

三、production & development

webpack4 之前，我們需要寫：

用于開發環境的webpack.dev.conf.js，定義 webpack 啟動的服務器等
用于生產環境的webpack.prod.conf.js，定義UglifyJSPlugin或其他配置等

而 webpack4 的 mode 給出了兩種配置：development(開發) 和 production(生產)。

生產模式下：啟用了代碼壓縮、作用域提升（scope hoisting）、 tree-shaking，使代碼最精簡
開發模式下：相較于更小體積的代碼，提供的是打包速度上的優化

我們修改 package.json 中 scripts 部分：

"scripts": {
  "start": "webpack --mode development",
  "build": "webpack --mode production"
}

現在可以npm start運行項目了。

webpack的基本配置已經完成，搭建項目又是一項新工程。

1、js：轉換ES6代碼，解決瀏覽器兼容。
2、css：css單獨打包并引入Less。
3、html，復制并壓縮html文件。
4、dist，打包前清理源目錄文件。
5、assets：靜態資源處理。
6、devServer，熱更新。

1、用 babel 轉換 ES6 代碼

用 babel 轉換 ES6 代碼

安裝babel-loader：

npm i babel-core babel-loader babel-preset-env --save-dev

在根目錄新建一個babel配置文件 .babelrc：

    {
        "presets": [
            "env"
        ]
    }

在根目錄新建一個webpack配置文件 webpack.config.js：

    module.exports = {
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader"
            }
          }
        ]
      }
    }

使用 babel-polyfill 解決兼容性問題

babel-polyfill：全局變量更改，一次編譯即可。（適合大型業務項目）
babel-plugin-transform-runtime：局部變量更改，會重復生成局部變量編譯。（適合開源項目）
polyfill-io：會根據瀏覽器類型生成與其匹配的兼容編譯，減少打包體積，推薦。

npm i babel-polyfill babel-plugin-transform-runtime  --save-dev

.babelrc 添加配置：

{
    "presets": [
        "env"
    ],
    "plugins": [
       "transform-runtime"
    ]
}

webpack.config.js 添加配置:

const path = require('path');
module.exports = {
    entry: [
        "babel-polyfill",
        path.join(__dirname, './src/index.js')
    ],
    // ...
};

二、編譯css

postcss-loader
mini-css-extract-plugin
單獨打包之前用extract-text-webpack-plugin，現在用mini-css-extract-plugin
瀏覽器前綴，比如-webkit，我們每次寫代碼根本不想加，這時候就需要配置postcss-loader，打包后自動加。

如：-webkit-transform: all 1s;/這里bulid后自動添加了 -webkit-/

安裝：

 npm i mini-css-extract-plugin css-loader --save-dev
 npm i style-loader postcss-loader  --save-dev

webpack.config.js 添加配置:

  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    module.exports = (env, argv) => {
      const devMode = argv.mode !== 'production'
      return {
        module: {
          rules: [
            // ...,
            {
                test: /\.css$/,
                use: [
                    devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                          loader: "postcss-loader",
                          options: {
                                plugins: [
                                    require("autoprefixer") /*在這里添加*/
                                ]
                          }
                     }
                ]
            },
            ]
          },
          plugins: [
            new MiniCssExtractPlugin({
              filename: "[name].css",
              chunkFilename: "[id].css"
            })
          ]
      }
    }

三、生成html文件 html-webpack-plugin

作用1：如果我們本地需要html模板就需要這個插件，可配置單頁、多頁。
作用2：build后的js,css可添加Hash值。

npm i html-webpack-plugin html-loader --save-dev

webpack.config.js 添加配置:

const HtmlWebPackPlugin = require("html-webpack-plugin");
    module.exports = {
        module: {
            rules: [
                // ...,
                {
                    test: /\.html$/,
                    use: [{
                        loader: "html-loader",
                        options: {
                            minimize: true
                        }
                    }]
                }
            ]
        },
        plugins: [
            new HtmlWebPackPlugin({
                template: "./src/index.html",
                filename: "./index.html"
            })
        ]
    };

四、打包前清理源目錄文件 clean-webpack-plugin

每次打包，都會生成項目的靜態資源，隨著某些文件的增刪，我們的 dist 目錄下可能產生一些不再使用的靜態資源，webpack并不會自動判斷哪些是需要的資源，為了不讓這些舊文件也部署到生產環境上占用空間，所以在 webpack 打包前最好能清理 dist 目錄。

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

webpack.config.js 添加配置:

const CleanWebpackPlugin = require('clean-webpack-plugin');
  module.exports = {
    plugins: [
      new CleanWebpackPlugin(['dist']),
    ]
  };

五、靜態資源處理 file-loader

assets文件下包含我們運用的靜態資源，如圖片，文本等

npm install file-loader --save-dev

webpack.config.js 添加配置:

  module.exports = {
      module: {
        rules: [
          {
            test: /\.(png|jpg|gif)$/,
            use: [
              {
                loader: 'file-loader',
                options: {}
              }
            ]
          }
        ]
      }
    }

六、熱更新 webpack-dev-server

npm i webpack-dev-server --save-dev

package.json更改scripts配置:

"scripts": {
      "start": "webpack-dev-server --mode development --open",
      "build": "webpack --mode production"
    }

webpack.config.js 添加配置:

module.exports = (env, argv) => {
    const devMode = argv.mode !== 'production'
    return {
        devServer: {
            port: 3000, //端口號
            overlay: true, // 開啟錯誤調試,
            hot: true,  //是否開啟hot-module-replacement
            https: false, // 如果需要用https請開啟，如http2
            compress:false, //是否啟用 gzip 壓縮。boolean 為類型，默認為 false
            open: false, // 啟動且第一次構建完時自動用你系統上默認的瀏覽器去打開要開發的網頁。
            stats: "errors-only" // 只展示錯誤信息，避免大量無用日志
        }   
    }
};

更多的 webServer配置詳情。

到這里webpack構建自動化項目的重要配置已經完成。接下來就是與各種框架的匹配配置。

webpack4 + react項目

目錄如下：

├── src
│ ├── assets ?? # 靜態資源
│ ├── components ??# 組件
│ │ ├── Product.less ??# less文件
│ │ └── Product.js ??# jsx文件，vscode配置可以使用js
│ ├── index.js ??# 入口文件
│ ├── index.html ?? # 模板文件
│ └──index.less
├── .babelrc
├── package-lock.json
├── package.json
└── webpack.config.js

安裝react相關模塊

    npm i react react-dom --save
    npm i babel-preset-react --save-dev
    npm i less less-loader --save-dev

.babelrc 配置

{
    "presets": [
        "env",
        "react"
    ],
    "plugins": [
       "transform-runtime"
    ]
}

webpack.config.js 最終配置：

const path = require('path');

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = (env, argv) => {
    const devMode = argv.mode !== 'production'
    return {
        entry: [  // 入口文件
            "babel-polyfill",
            path.join(__dirname, './src/index.js')
        ],
        output:{ // 入口文件
            filename:'main.js'
        },
        devServer: {  // 熱更新
            port: 3000, //端口號
            overlay: true, // 開啟錯誤調試,
            hot: true,  //是否開啟hot-module-replacement
            https: false, // 如果需要用https請開啟，如http2
            compress:false, //是否啟用 gzip 壓縮。boolean 為類型，默認為 false
            open: false, // 啟動且第一次構建完時自動用你系統上默認的瀏覽器去打開要開發的網頁。
            stats: "errors-only" // 只展示錯誤信息，避免大量無用日志
        },
        module: {  // loader配置
            rules: [{
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader"
                    }
                },
                {
                    test: /\.html$/,
                    use: [{
                        loader: "html-loader",
                        options: {
                            minimize: true
                        }
                    }]
                },
{
                    test: /\.css$/,
                    use: [
                        devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                        'css-loader',
                        {
                              loader: "postcss-loader",
                              options: {
                                    plugins: [
                                        require("autoprefixer") /*在這里添加*/
                                    ]
                              }
                         }
                    ]
                },
                {
                    test: /\.less$/,
                    use: [
                        devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                        'css-loader',
                        'less-loader',
                        {
                            loader: "postcss-loader",
                            options: {
                                plugins: [
                                    require("autoprefixer") /*在這里添加*/
                                ]
                            }
                        }
                    ]
                },
                {
                    test: /\.(png|svg|jpg|gif)$/,
                    use: [
                        'file-loader'
                    ]
                }
            ]
        },
        plugins: [
            new CleanWebpackPlugin(['dist']), // 清除上一次dist的源文件
            new HtmlWebPackPlugin({ // 配置html模板
                template: "./src/index.html",
                filename: "./index.html"
            }),
            new MiniCssExtractPlugin({ // css單獨打包
                filename: "[name].css",
                chunkFilename: "[id].css"
            })
        ]
    }
};

總結：至此我們學了如何從零搭建webpack+react項目，之后router，redux等全家桶系列，大家可以自行研究，其實熟悉以后完全可以自己寫一套腳手架，比如寫一套將redux與redux-saga合并的狀態管理工具。

建議大家看我的原文地址：github單頁應用

以下是比較成熟的腳手架推薦給大家：

create-react-app
react-boilerplate
umi

下篇文章：webpack4+react多頁應用

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

webpack4+react從零開始搭建項目

webpack4+react從零開始搭建項目

前言

webpack基本配置

一、創建文件/初始化/安裝webpack

二、entry & output

三、production & development

webpack的基本配置已經完成，搭建項目又是一項新工程。

1、用 babel 轉換 ES6 代碼

二、編譯css

三、生成html文件 html-webpack-plugin

四、打包前清理源目錄文件 clean-webpack-plugin

五、靜態資源處理 file-loader

六、熱更新 webpack-dev-server

webpack4 + react項目

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

webpack4+react從零開始搭建項目

前言

webpack基本配置

一、創建文件/初始化/安裝webpack

二、entry & output

三、production & development

webpack的基本配置已經完成，搭建項目又是一項新工程。

1、用 babel 轉換 ES6 代碼

二、編譯css

三、生成html文件 html-webpack-plugin

四、打包前清理源目錄文件 clean-webpack-plugin

五、靜態資源處理 file-loader

六、熱更新 webpack-dev-server

webpack4 + react項目

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频