webpack4 配置說明（基礎篇）

1. entry

entrt是webpack的打包入口

1. 單頁面入口

entry: './src/pages/index`

2. 多頁面入口

glob.sync('./src/pages/**/app.js').forEach(path => {
    const chunk = path.split('./src/pages/')[1].split('/app.js')[0]
    pages[chunk] = {
        entry: path,
        template: 'public/index.html',
        title: titles[chunk],
        chunks: ['chunk-vendors', 'chunk-common', chunk]
    }
})

在output裏面添加htmlWebpackPlugins

    const entry = {};
    const htmlWebpackPlugins = [];
    const entryFiles = glob.sync(path.join(__dirname, './src/pages/*/app.js')); //獲取路徑裏面的入口文件

    Object.keys(entryFiles)
        .map((index) => {
            const entryFile = entryFiles[index];
            const match = entryFile.match(/src\/(.*)\/index\.js/);
            const pageName = match && match[1];
            entry[pageName] = entryFile;
            htmlWebpackPlugins.push(
                new HtmlWebpackPlugin({
                    template: path.join(__dirname, `src/pages/${pageName}/index.html`),
                    filename: `${pageName}.html`,
                    chunks: [pageName],
                    inject: true,
                    minify: {
                        html5: true,
                        collapseWhitespace: true,
                        preserveLineBreaks: false,
                        minifyCSS: true,
                        minifyJS: true,
                        removeComments: false
                    }
                })
            );
        });

    return {
        entry,
        htmlWebpackPlugins
    }

2. ouotput

用來描述輸入文件目錄

 output: {
        path: path.join(__dirname, 'dist'), // 輸入文件路徑
        filename: '[name].js' // 輸出文件名稱
    },

3. loader

loader一般處理的是項目裏面的靜態資源，多個loader的情況下是從右向左執行的

  rules: [
            {
                test: /.js$/,
                use: 'babel-loader'  // 處理es6的語法
            },
            {
                test: /.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                     {
                        loader: 'postcss-loader', // 自動補全css前綴
                        options: {
                            plugins: () => [
                                require('autoprefixer')({
                                    browsers: ['last 2 version', '>1%', 'ios 7']
                                })
                            ]
                        }
                    },
                    {
                        loader: 'px2rem-loader', // px自動轉換成rem
                        options: {
                            remUnit: 75,
                            remPrecision: 8
                        }
                    }
                ]
            },
            {
                test: /.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /.(png|jpg|gif|jpeg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10240
                        }
                    }
                ]
            },
            {
                test: /.(woff|woff2|eot|ttf|otf)$/,
                use: 'file-loader'
            }
        ]

4. plugins

插件的範圍包括，從打包優化和壓縮，一直到重新定義環境中的變量。插件接口功能極其強大，可以用來處理各種各樣的任務。

5. modle

通過選擇 development 或 production 之中的一個，來設置 mode 參數，你可以啓用相應模式下的 webpack 內置的優化

6.熱跟新和文件指紋

點擊跳轉熱跟新和文件指紋

webpack4配置說明（插件篇）