webpack 配置介紹。

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

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

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

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

項(xiàng)目結(jié)構(gòu)

image.png

entry配置

entry 參數(shù)有多種，可以 字符串，對(duì)象 數(shù)組都可以。對(duì)象適合多頁(yè)面配置，字符串?dāng)?shù)組適合單頁(yè)應(yīng)用。

這里主要介紹下多頁(yè)面。拿我們的項(xiàng)目 為例，一個(gè)文件夾為一個(gè)頁(yè)面單位，js html都在此文件夾里面

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

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

組成如下的 鍵值對(duì)入口配置

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

plugins 插件

生成頁(yè)面配置

由于多頁(yè)面 我們需要找到 每一個(gè)頁(yè)面 并輸出。

    // 找出 所有的頁(yè)面文件夾名
    const directories = (fs.readdirSync(filePath) || []);
    // 遍歷所有的頁(yè)面 組裝打包輸出的 html 配置
    const htmlPlugin = directories.map((item) => {
        // 業(yè)余頁(yè)面 主頁(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頁(yè)面的名字為one.html `${item}.html`
                title: 'one', //它的title為one，記得要在src/one.html中加入<%= %>
                hash: true,
                chunks: [item] // chunks主要用于多入口文件，選擇你要使用那些js文件
            })
        }
    });
    return htmlPlugin;

HtmlWebpackPlugin 打包 html插件配置：

title: 用來(lái)生成頁(yè)面的 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 選項(xiàng)給 minify 輸出
hash: true | false, 如果為 true, 將添加一個(gè)唯一的 webpack 編譯 hash 到所有包含的腳本和 CSS 文件，對(duì)于解除 cache 很有用。
cache: true | false，如果為 true, 這是默認(rèn)值，僅僅在文件修改之后才會(huì)發(fā)布文件。
showErrors: true | false, 如果為 true, 這是默認(rèn)值，錯(cuò)誤信息會(huì)寫入到 HTML 頁(yè)面中
chunks: 允許只添加某些塊 (比如，僅僅 unit test 塊)
chunksSortMode: 允許控制塊在添加到頁(yè)面之前的排序方式，支持的值：'none' | 'auto' | 'dependency' |'manual' | {function} - default: 'auto'
excludeChunks: 允許跳過(guò)某些塊，(比如，跳過(guò)單元測(cè)試的塊) 

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

壓縮js 配置

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

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

環(huán)境變量配置

配置環(huán)境變量 在打包的時(shí)候 傳入?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'], // 使用這兩個(gè)loader來(lái)加載樣式文件
               include: [
                    path.resolve(__dirname, './src') // 配置路徑 當(dāng)前l(fā)oader 只對(duì)某個(gè)路徑下的文件生效
               ],
            },
            {
                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',
            },
        ],
    },

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

  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相對(duì)于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 比較方便

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

    devServer: {
        
        // 服務(wù)端口配置
        port: '8066',
        // 自定義請(qǐng)求頭數(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 自動(dòng)把模塊和版本號(hào)添加到dependencies部分
npm install module-name -save-dev 自動(dòng)把模塊和版本號(hào)添加到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)建時(shí)候需要，生產(chǎn)環(huán)境并不需要的 安裝到 devdependencies 。