webpack4.0配置說明

在這里插入圖片描述

請添加圖片描述

什么是 Webpack

webpack是前端資源模塊化管理和打包工具，可將松散的模塊按依賴和規則打包成符合生產環境部署的前端資源，可將按需加載的模塊進行代碼分隔并進行異步加載，通過loader的裝換，任何形式的資源都可視作模塊，如CommonJS模塊、AMD模塊、ES6模塊、CSS、圖片、JSON、CoffeeScript、LESS等，

簡單來說，它其實就是一個模塊打包器，

為什么要使用？

模塊開發，簡化開發，提高了開發效率

概念

本質上，webpack 是一個用于現代 JavaScript 應用程式的 靜態模塊打包工具，當 webpack 處理應用程式時，它會在內部構建一個依賴圖(dependency graph)，此依賴圖對應映射到專案所需的每個模塊，并生成一個或多個 bundle，

入口（entry）
輸入（output）
loader （讓 webpack 能夠去處理其他型別的檔案，并將它們轉換為有效模塊，以供應用程式使用）
plugin （loader 用于轉換某些型別的模塊，而插件則可以用于執行范圍更廣的任務，包括：打包優化，資源管理，注入環境變數，）
模式（mode）

創建webpack結構目錄

在這里插入圖片描述

entry (入口)

指定加載的主檔案的路徑

module.exports = {
  entry: './src/index.js', // 表示加載當前路徑下的src的index.js，如果加載多個檔案可寫陣列 如： ['./src/index.js','./src/index2.js']
};

output （輸出）

表示打包后輸入的路徑

module.exports = {
  entry: './src/index.js', 
  output: {
    filename: '[name].js', // [name] 表示輸入為原名稱
    path:path.resolve(__dirname, 'dist'),
  },
};

loader

loader 用于對模塊的源代碼進行轉換，類似于其他構建工具中“任務(task)”，

loader 可以將檔案從不同的語言（如 TypeScript）轉換為 JavaScript 或將行內影像轉換為 data URL，loader 甚至允許你直接在 JavaScript 模塊中 import CSS 檔案！

特點：

loader 可以是同步的，也可以是異步的
loader 運行在 Node.js 中，并且能夠執行任何操作，
除了常見的通過 package.json 的 main 來將一個 npm 模塊匯出為 loader，還可以在 module.rules 中使用 loader 欄位直接參考一個模塊，
插件(plugin)可以為 loader 帶來更多特性，
loader 能夠產生額外的任意檔案，

常用Loader

babel-loader

作用：es6轉換成es5

https://webpack.docschina.org/loaders/babel-loader/

安裝依賴

npm install -D babel-loader @babel/core @babel/preset-env webpack

添加組態檔

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    module: {
        rules: [{
            test: /\.m?js$/,
            exclude: /(node_modules)/, // 表示排除的檔案夾 
            use: {
                loader: 'babel-loader', // 使用的loader 
                options: {
                    // babel-loader在執行的時候，可能會產生一些運行期間重復的公共檔案，造成代碼體積大冗余，同時也會減慢編譯效率
                    cacheDirectory: true, 
                    presets: ['@babel/preset-env'] // 使用的預設
                }
            }
        }]
    }
};

@babel/preset-env 只會轉換語法，也就是我們看到的箭頭函式、const一類，
如果進一步需要轉換內置物件、實體方法，那就得用polyfill, 這就需要你做一點配置了,

如下，使用 Promise、async、await 這寫高級函式，@babel/preset-env 這個loader就有點費勁了，

let result = new Promise((resolve, reject) => {
    resolve('成功了')
});

setTimeout(async() => {
    await console.log("async -> await")
}, 200);

console.log(result)

在控制臺會輸入這個錯誤,具體原因請看這個帖子
https://zhuanlan.zhihu.com/p/147083132
在這里插入圖片描述

@babel/preset-env 擁有根據 useBuiltIns 引數的多種polyfill實作，
優點：是覆寫面比較全（entry），
缺點：會污染全域，
useage 可以按需引入 polyfill, 打包體積就小，但如果打包忽略node_modules 時如果第三方包未轉譯則會出現兼容問題

官方推薦使用 @babel/plugin-transform-runtime

在這里插入圖片描述
1、安裝 npm install -D @babel/plugin-transform-runtime
2、配置 @babel/plugin-transform-runtime 插件

module: {
        rules: [{
            test: /\.m?js$/,
            exclude: /(node_modules)/, // 表示排除的檔案夾 
            use: {
                loader: 'babel-loader', // 使用的loader 
                options: {
                    cacheDirectory: true,
                    presets: ['@babel/preset-env'], // 使用的預設
                    plugins: ['@babel/plugin-transform-runtime'], // 處理高級語法
                }
            },
        }]
    }

3、運行后的結果，打包的代碼為es5的處理結果
在這里插入圖片描述

cache-loader

cache-loader 允許快取以下 loaders 到（默認）磁盤或資料庫，
在一些性能開銷較大的 loader 之前添加 cache-loader，以便將結果快取到磁盤里，

安裝

npm install --save-dev cache-loader

配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.ext$/,
        use: ['cache-loader', ...loaders],
        include: path.resolve('src'),
      },
    ],
  },
};

請注意，保存和讀取這些快取檔案會有一些時間開銷，所以請只對性能開銷較大的 loader 使用此 loader，

css-loader

css-loader 幫我們決議了css會，對 @import 和 url() 進行處理，就像 js 決議 import/require() 一樣，

安裝依賴

npm install --save-dev css-loader

配置loader

{
     test: /.css$/,
     loader: 'css-loader',
     exclude: /node_modules/
}

在index.js 和 index.css 寫下如下代碼，
在這里插入圖片描述
游覽器將渲染

style-loader

把 CSS 插入到 DOM 中，

就是將下面的代碼，讓插件幫你添加到html中，

let style = document.createElement('style');
style.innerText = css[0][1];

安裝

npm install --save-dev style-loader

配置

module: {
        rules: [{
            test: /.css$/,
            // loader: 'css-loader',
            use: ["style-loader", "css-loader"],
            exclude: /(node_modules|bower_components)/
        }]
    }

然后在直接參考css就可以了，

sass-loader

加載 Sass/SCSS 檔案并將他們編譯為 CSS，

1、安裝

npm install sass-loader sass webpack --save-dev

2、配置

{
            test: /.css$/,
            use: [
                // 將 JS 字串生成為 style 節點
                'style-loader',
                // 將 CSS 轉化成 CommonJS 模塊
                'css-loader',
                // 將 Sass 編譯成 CSS
                'sass-loader',
            ],
           exclude: /(node_modules|bower_components)/
  }

3、參考 import ‘./index.scss’; 就可以了，

file-loader

可以用來幫助webpack打包處理一系列的圖片檔案；比如：.png 、 .jpg 、.jepg等格式的圖片；

安裝

 npm install file-loader --save-dev

配置

{
        test: /\.(png|jpe?g|gif)$/i, // 正則匹配后綴
        use: [
          {
            loader: 'file-loader',
            options:{
				name: '[path][name].[ext]', // 打包后的名稱
				outputPath:"images/", // 打包后輸入的檔案夾
			}
          },
        ],
 },

url-loader

webpack 的加載器，可將檔案轉換為 base64 URI，

安裝

 npm install url-loader --save-dev

配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader', 
            options: {
              limit: 8192, // 小于8192位元組的圖片打包成base 64圖片
              name:'images/[name].[hash:8].[ext]',
              publicPath:''
            }
          }
        ]
      }
    ]
  }
}

eslint-loader

安裝

npm install eslint eslint-loader --save-dev

配置

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

source-map-loader

從現有源檔案（從它們的sourceMappingURL）中提取源映射，

安裝

npm i -D source-map-loader

配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ["source-map-loader"],
        enforce: "pre"
      }
    ]
  }
};

source-map-loader從所有 JavaScript 條目中提取現有的源映射，這包括行內源映射以及通過 URL 鏈接的源映射，所有源的地圖資料被傳遞到的WebPack用于按照所選擇的處理源地圖樣式由指定devtool在選項

postcss-loader

自動獲取瀏覽器的流行度和能夠支持的屬性，并根據這些資料幫你自動為 CSS 規則添加前綴，

安裝

npm install --save-dev postcss-loader postcss

配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

使用 postcss.config.js 組態檔

// postcss.config.js
module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
};

plugin

HtmlWebpackPlugin

HtmlWebpackPlugin簡化了HTML檔案的創建，以便為你的webpack包提供服務，這對于在檔案名中包含每次會隨著編譯而發生變化哈希的 webpack bundle 尤其有用，你可以讓插件為你生成一個HTML檔案，使用lodash模板提供你自己的模板，或使用你自己的loader，

安裝

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

配置

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	plugins: [new HtmlWebpackPlugin( 
    template: 'index.html',
	minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },)]
}

常用配置

名稱	描述
title	用來生成頁面的 title 元素
filename	要將 HTML 寫入到的檔案，默認為index.html. 您也可以在此處指定子目錄（例如：）assets/admin.html，該[name]占位符將與輸入的名稱所取代，也可以是一個函式，例如(entryName) => entryName + ‘.html’.
template	webpack模板的相對或絕對路徑，默認情況下，src/index.ejs如果存在，它將使用，
publicPath	用于腳本和鏈接標簽的 publicPath
favicon	將給定的圖示路徑添加到輸出 HTML
meta	可以給html加入meta標簽
minify	控制是否以及以何種方式應該縮小輸出 , 比如 minify: { removeAttributeQuotes: true // 移除屬性的引號 }
hash	用于清除快取,默認fasle
cache	指定檔案要不要快取
showErrors	錯誤詳細資訊將寫入 HTML 頁面,默認true
chunks	可以配置多個打入口

mini-css-extract-plugin

這個插件將 CSS 提取到單獨的檔案中，它為每個包含 CSS 的 JS 檔案創建一個 CSS 檔案，它支持按需加載 CSS 和 SourceMaps，

與 extract-text-webpack-plugin 相比：

List item
異步加載
無重復編譯（性能）
更容易使用
特定于 CSS

安裝

npm install --save-dev mini-css-extract-plugin

配置

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

webpack-dev-server

webpack-dev-server 為你提供了一個簡單的 web server，并且具有 live reloading(實時重新加載) 功能，簡稱熱更新，

安裝

npm install --save-dev webpack-dev-server

配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
	
 module.exports = {
	 devServer: {
        publicPath: '/', // 前綴
        port: 8888, // 服務器監聽的埠
        open: true, // 是否打開瀏覽器提供訪問
        compress: true, // 啟動gzip壓縮
        host: "127.0.0.1", // 可以讓別人訪問當前服務，但是如果這邊編譯，那邊也會同步更新
        inline: true,
        hot: true, // 熱跟新，在不重繪的情況更改css,需要配合webpack.HotModuleReplacementPlugin使用 
    },
}

要是出現 Cannot find module ‘webpack-cli/bin/config-yargs’ 這個錯誤，說明webpack-cli 和 webpack-dev-server 的版本不匹配，

版本對應：
“webpack”: “^4.44.1”,
“webpack-cli”: “^3.3.12”,
“webpack-dev-server”: “^3.11.0”

clean-webpack-plugin

每次打包前清空之前編譯的檔案夾，

安裝

npm i clean-webpack-plugin -D

配置

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

module.exports = {
	 plugins: [
	        new CleanWebpackPlugin(),
	 ]
}

css-assets-webpack-plugin

它將在 Webpack 構建期間搜索 CSS 資產并優化\最小化 CSS，

安裝

npm install --save-dev optimize-css-assets-webpack-plugin

配置

var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');


module.exports = {
  module: {
  plugins: [
    new ExtractTextPlugin('styles.css'),
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.optimize\.css$/g,
      cssProcessor: require('cssnano'), // 用于優化\最小化 CSS 的 CSS 處理器，默認為cssnano
      // 傳遞給 的插件選項cssProcessor，默認為{}
      cssProcessorPluginOptions: { 
        preset: ['default', { discardComments: { removeAll: true } }],
      },
      canPrint: true, // 指示插件是否可以將訊息列印到控制臺，默認為 true
    })
  ]
};

uglifyjs-webpack-plugin

對js檔案進行壓縮，

安裝

npm install uglifyjs-webpack-plugin --save-dev

配置

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
module.exports = {
  optimization: {
    minimizer: [
    new UglifyJsPlugin(
	    {
	        test: /\.js(\?.*)?$/i,
	    }
     )],
  },
};

配置

source map

一種提供源代碼到構建后代碼映射技術（如果構建后代碼出錯，可以通過映射追蹤到源代碼錯誤）

在這里插入圖片描述
其中一些值適用于開發環境，一些適用于生產環境，對于開發環境，通常希望更快速的 source map，需要添加到 bundle 中以增加體積為代價，但是對于生產環境，則希望更精準的 source map，需要從 bundle 中分離并獨立存在，

開發模式：devtool: ‘cheap-eval-source-map’

生產模式: devtool: ‘cheap-source-map’

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/291881.html

標籤：其他

上一篇：利用jQuery完成一個簡單的按鈕顏色變化（筆記）

下一篇：JavaScript入門

WebPack 4.x 配置