webpack4入門參考

Webpack版本：4.25.1

特性

• 有code-spliting（代碼分割）的功能，可以根據需要進行加載，而不是一次加載全部

• 通過loader處理各種文件（js、圖片、css、json、less、coffeescipt等），任何靜態的資源會被視爲模塊

• 插件

• 模塊熱更新

• 適合大型項目

安裝

npm i webpack --save-dev

簡單使用

簡單的打包可以這樣寫：

webpack 被打包的文件名（輸入） 打包後的文件名（輸出）

常用命令行參數：

--watch 在被打包文件發生變化時自動更新

--config filename.js 指定其他配置文件

--progress 打包過程有百分比進度顯示

--display-modules 顯示打包的所有模塊

--display-reasons 顯示打包每個模塊的原因

配置文件

對於更復雜的依賴結構，一般不會像上面的命令那樣寫。通常會專門編寫一個配置文件，每次打包時執行這個配置文件即可。

建立webpack.config.js文件，這樣在根目錄下執行webpack命令時會自動根據這個文件進行打包操作。如果沒有找到這個配置文件，則會顯示關於webpack所有命令行參數的說明。

基本結構

var path = require('path');

module.exports = {
    mode: 'development',
    entry: {        // 對應每個chunk
        page1: './src/script/a.js',
        page2: './src/script/b.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js'
    }
}

如果想只用webpack這個命令執行復雜的命令行參數，需要在package.json的scripts字段添加webpack屬性，值是命令的字符串形式（多個入口文件就用字符串數組，或者是對象，鍵對應的是chunk，一般這樣針對的是單頁面），之後用這個命令

npm run webpack

對於非js文件的打包處理

打包css文件需要安裝額外的css-loader和style-loader.
安裝好之後，在入口js文件可以這樣寫：

require('style-loader!css-loader!./style.css');

避免太多css文件都要這樣寫的麻煩，可以使用--module-bind命令行參數來指定加載器：

webpack xxx1 xxx2 --module-bind "css=style-loader!css-loader"

這樣就可以正常地reuire那些css文件了：

require('./style.css');

 

由於webpack生成的js文件名一般都是動態的，所以在html中script的引用會比較麻煩，所以需要html-webpack-plugin模塊：

npm i html-webpack-plugin

然後在webpack配置文件中添加plugins屬性：

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

modeule.exports = {
    /* 之前的配置
    ...
     */
    plugins: [
        new htmlWebpackPlugin({
            template: 'index.html'        // 生成新html文件的參考模板
        })
    ]
}