webpack 配置介紹刁俭。

entry：打包入口，在這里的js文件以及在里面被引用的文件會被webpack 找到打包韧涨。

module：模塊最常用的就是配置各種加載器表示進(jìn)行轉(zhuǎn)換時牍戚，應(yīng)該使用哪個 loader。

output：打包輸出配置虑粥，輸出在哪里如孝，輸出的命名規(guī)則等。

plugins：插件配置娩贷，這個大大加強(qiáng)了webpack的靈活性第晰，現(xiàn)在已經(jīng)有大量的人貢獻(xiàn)的插件。

項目結(jié)構(gòu)

image.png

entry配置

entry 參數(shù)有多種彬祖，可以字符串茁瘦，對象數(shù)組都可以。對象適合多頁面配置储笑，字符串?dāng)?shù)組適合單頁應(yīng)用甜熔。

這里主要介紹下多頁面。拿我們的項目為例突倍，一個文件夾為一個頁面單位腔稀，js html都在此文件夾里面

首先使用node 的 fs模塊遍歷頁面文件夾找到里面的 index.js，拼上文件夾名稱組成鍵值對羽历，

    // 找出page 下面文件夾 組裝entry入口配置
    let entry = {};
    // 獲取目錄下所有文件夾名稱（包含文件）,有必要的話可以判斷是不是文件夾
    const directories = (fs.readdirSync(filePath) || []);
    directories.filter((item) => {
        // 找到頁面文件夾之后 再找到里面的 index.js 組成鍵值對
        const jsPath = `${config.pageBasePath}/${item}/index.js`;
        if (fs.existsSync(jsPath)) {
            entry[item] = jsPath;
        }
    });
    return entry;

組成如下的鍵值對入口配置

    {  
        pageName: 'xx/xx/index.js'
    }

plugins 插件

生成頁面配置

由于多頁面我們需要找到每一個頁面并輸出焊虏。

    // 找出 所有的頁面文件夾名
    const directories = (fs.readdirSync(filePath) || []);
    // 遍歷所有的頁面 組裝打包輸出的 html 配置
    const htmlPlugin = directories.map((item) => {
        // 業(yè)余頁面 主頁地址
        const htmlPath = `${config.pageBasePath}/${item}/index.tpl`;
        if (fs.existsSync(htmlPath)) {
            // 組裝 打包html 參數(shù)
            return new HtmlWebpackPlugin({
                minify: false,
                template: htmlPath, //
                filename: `${item}.html`, // 生成的html頁面的名字為one.html `${item}.html`
                title: 'one', //它的title為one，記得要在src/one.html中加入<%= %>
                hash: true,
                chunks: [item] // chunks主要用于多入口文件秕磷，選擇你要使用那些js文件
            })
        }
    });
    return htmlPlugin;

HtmlWebpackPlugin 打包 html插件配置：

title: 用來生成頁面的 title 元素
filename: 輸出的 HTML 文件名炕淮，默認(rèn)是 index.html, 也可以直接配置帶有子目錄。
template: 模板文件路徑跳夭，支持加載器涂圆，比如 html!./index.html
inject: true | 'head' | 'body' | false  ,注入所有的資源到特定的 template 或者 templateContent 中，如果設(shè)置為 true 或者 body币叹，所有的 javascript 資源將被放置到 body 元素的底部润歉，'head' 將放置到 head 元素中。
favicon: 添加特定的 favicon 路徑到輸出的 HTML 文件中颈抚。
minify: {} | false , 傳遞 html-minifier 選項給 minify 輸出
hash: true | false, 如果為 true, 將添加一個唯一的 webpack 編譯 hash 到所有包含的腳本和 CSS 文件踩衩，對于解除 cache 很有用嚼鹉。
cache: true | false，如果為 true, 這是默認(rèn)值驱富，僅僅在文件修改之后才會發(fā)布文件锚赤。
showErrors: true | false, 如果為 true, 這是默認(rèn)值，錯誤信息會寫入到 HTML 頁面中
chunks: 允許只添加某些塊 (比如褐鸥，僅僅 unit test 塊)
chunksSortMode: 允許控制塊在添加到頁面之前的排序方式线脚，支持的值：'none' | 'auto' | 'dependency' |'manual' | {function} - default: 'auto'
excludeChunks: 允許跳過某些塊，(比如叫榕，跳過單元測試的塊)

關(guān)于 chunksSortMode 推薦使用 manual 手動排序浑侥，按照chunks 數(shù)組的順序插入頁面。

壓縮js 配置

使用 webpack-parallel-uglify-plugin 進(jìn)行壓縮可以多線程操作晰绎，效率更高

    new ParallelUglifyPlugin({
        // 傳遞給 UglifyJS 的參數(shù)
        sourceMap: true,
        uglifyJS: {
            output: {
                // 最緊湊的輸出
                beautify: false,
                // 刪除所有的注釋
                comments: false,
            },
            compress: {
                // 在UglifyJs刪除沒有用到的代碼時不輸出警告
                // 刪除所有的 `console` 語句寓落，可以兼容ie瀏覽器
                drop_console: true,
                // 內(nèi)嵌定義了但是只用到一次的變量
                collapse_vars: true,
                // 提取出出現(xiàn)多次但是沒有定義成變量去引用的靜態(tài)值
                reduce_vars: true,
            }
        },
    }),

環(huán)境變量配置

配置環(huán)境變量在打包的時候傳入?yún)?shù)控制。

        new webpack.DefinePlugin({
            'process.env': JSON.stringify(staticData)
        }),

打包代碼加入注釋（版權(quán)類的）

  new webpack.BannerPlugin('版權(quán)所有荞下，翻版必究'),

module loader配置

主要配置 css相關(guān)和 html相關(guān)的 loader伶选，

    module: {
        rules: [
            {
               test: /\.css$/,  // 正則匹配所有.css后綴的樣式文件
               use: ['style-loader', 'css-loader'], // 使用這兩個loader來加載樣式文件
               include: [
                    path.resolve(__dirname, './src') // 配置路徑 當(dāng)前l(fā)oader 只對某個路徑下的文件生效
               ],
            },
            {
                test: /\.less$/,
                use: ['style-loader','css-loader', 'less-loader']
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,  // 優(yōu)化處理加快速度
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.tpl$/,
                loader: 'art-template-loader',
            },
        ],
    },

也可以在項目里面使用 require 加載文件指定loader; 會覆蓋上面的配置。
比如：

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

output 輸出配置

path 打包之后的文件輸出目標(biāo)地址尖昏。
filename 輸出的文件命名規(guī)則考蕾。

    // 打包輸出配置
    output : {
        path : path.join(__dirname, 'build/sources'), // 打包輸出的路徑  打包后的文件存放的地方
        filename: '[name].bundle.js', // bundle  輸出之后的文件名 [hash].
        publicPath: 'sources/', // 規(guī)定所有已經(jīng)解析的文件目錄，url相對于index.html会宪。
    },

resolve 路徑別名配置

    // 配置路徑別名 
    resolve:{
        alias: {
            src: path.resolve(__dirname, "src/"),
            commonJs: path.resolve(__dirname, "src/scripts/common/"),
        }
    },

devtool 配置

devtool里的有7種SourceMap模式開發(fā)環(huán)境使用 eval 比較方便

模式	解釋
eval	每個module會封裝到 eval 里包裹起來執(zhí)行，且會在末尾追加注釋 //@ sourceURL.
source-map	生成一個SourceMap文件.
hidden-source-map	和 source-map 一樣蚯窥，但不會在 bundle 末尾追加注釋.
inline-source-map	生成一個 DataUrl 形式的 SourceMap 文件.
eval-source-map	每個module會通過eval()來執(zhí)行掸鹅，并且生成一個DataUrl形式的SourceMap.
cheap-source-map	生成一個沒有列信息（column-mappings）的SourceMaps文件，不包含loader的 sourcemap（譬如 babel 的 sourcemap）
cheap-module-source-map	生成一個沒有列信息（column-mappings）的SourceMaps文件拦赠，同時 loader 的 sourcemap 也被簡化為只包含對應(yīng)行的巍沙。

devServer 配置服務(wù)參數(shù)

    devServer: {
        
        // 服務(wù)端口配置
        port: '8066',
        // 自定義請求頭數(shù)據(jù) Response Headers
        headers: {
            key: 'value'
        },
        // 熱更新配置
        contentBase: path.join(__dirname, 'build/'),
        publicPath: '/sources',
        hot: true,
        
        // 轉(zhuǎn)發(fā)配置
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                secure: false
            }
        }
    }

devServer 可以配置代理轉(zhuǎn)發(fā)，熱更新服務(wù)端口等荷鼠。

話外：
npm install module-name -save 自動把模塊和版本號添加到dependencies部分
npm install module-name -save-dev 自動把模塊和版本號添加到devdependencies部分
dependencies 是生產(chǎn)環(huán)境使用句携。
devdependencies 是開發(fā)環(huán)境。
比如：
art-template jquery numeral 等第三方組件是需要在生產(chǎn)環(huán)境使用的允乐，必須安裝到 dependencies 矮嫉。

style-loader sass-loader webpack 等是在打包構(gòu)建時候需要，生產(chǎn)環(huán)境并不需要的安裝到 devdependencies 牍疏。

webpack 多頁面配置