學習整理：用webpack4.x構建基本項目

webpack4 在2018年就已經發布了， 相比webpack3，webpack4需要的配置減少了很多，對入口和出口配置都有默認設置可以不用手動設置，但還是要在webpack.config.js中配置一些會用到的插件。

這段時間學習webpack4，特整理筆記如下，記錄用webpack4構建基本項目的過程，如有誤歡迎指正！

參考：https://www.html.cn/archives/9436

---

先上一下配置文件，里面有相關版本號，特別要注意的是babel-core和babel-loader的版本，會有不兼容的情況：

 

---

 

1.首先新建項目目錄

• 新建src文件夾和dist文件夾
• 在src文件夾下新建html、css、js、image文件夾，新建index.html和index.js作為入口文件（index.js是webpack4中的默認入口文件，編譯后會在dist文件夾下生成main.js文件）
• 執行命令 npm init 初始化項目，生成package.json文件

完成上述后項目目錄如下：

 

---

 

2.接下來安裝配置webpack4

• 執行命令1： cnpm i webpack@4.39.1 --save-dev
• 執行命令2：cnpm i webpack-cli@3.3.6 --save-dev

Tip：可以在@后面指定版本號

 

• 然后在package.json文件中添加一個腳本命令

 

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",

  },

 

保存並運行命令 npm run build 

（注意webpack4中默認以index.js為入口文件進行編譯打包，如果剛才沒有新建index.js則會報錯。當然也可以指定入口文件）

運行命令成功后會在dist目錄下生成一個main.js文件（這個main.js會在index.html中默認引入，實際存在內存中所以看不到）

剛才運行的 npm run build命令是在默認模式下進行打包的，webpack4新增了一個特性就是 production（生產）和 development（開發）模式。兩者的區別是，前者打包后的文件是壓縮的，而后者這是沒有壓縮的

通過在package.json中配置不同命令來切換打包模式：

 

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

然后可以通過運行不同命令來切換打包模式

• npm run build 
• npm run dev

---

 

3.下一步安裝webpack-dev-server來熱更新webpack

• 運行命令cnpm i webpack-dev-server --save-dev
• 成功之后在package.json中增加如下代碼：

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

也可以在這條命令中設置默認開啟的瀏覽器和是否熱更新，默認開啟端口等選項：

"start": "webpack-dev-server --mode development --open firefox --port:8020 --hot --host 127.0.0.1"

完成后保存，運行之后會自動打開瀏覽器進入頁面

---

 

4.接下來安裝配置Babel來轉譯ECMA5以上的JavaScript代碼

以上步驟都不需要像webpack3一樣在webpack.config.js中動手動腳，但配置babel還是要新建一個webpack.config.js文件

• 執行命令 cnpm i babel-core babel-loader babel-preset-env --save-dev （如果有提示版本警告 建議參考文章頭部提供的版本號）
• 在根目錄新建.babelrc，輸入如下內容

  {
      "presets": [
          "env"
      ]
  }

• 在根目錄中新建webpack.config.js文件，輸入如下內容（如果要自定義入口出口，則要自己再配置一下）

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

  接下來可以在index.js中手寫一些ES6語法的代碼來測試一下

5.安裝插件：html-webpack-plugin 和 html-loader來處理html

通過安裝這兩個插件來處理HTML

• 執行命令

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

• 然后更新webpack.config.js配置

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

• 如果前面創建了index.html，則運行

  npm run build

  否則新建index.html再運行命令，成功后會發現在dist目錄中多了一個index.html文件

---

 

做到這里項目的架構已經基本完成了，如果還要還要打包CSS文件可以使用用 mini-css-extract-plugin 等插件，具體請參考 https://www.html.cn/archives/9436

文章可能有一些寫的不到位的地方，敬請諒解，歡迎指正！