webpack系列学习-多页面打包前言：笔者把学习的webpack知识从基础到原理写个系列，以便回顾。希望能帮助到更多正

前言：笔者把学习的webpack知识从基础到原理写个系列，以便回顾。希望能帮助到更多正在学习webpack的小伙伴。

自动清理构建目录产物

使用clean-webpack-plugin
安装

npm i clean-webpack-plugin

使用

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
    module.exports = {
        plugins:[
            new CleanWebpackPlugin()
        ]
    }

结果：进行两次打包npm run build ,可以发现只有1个dist目录

PostCss插件autoprefixer自动补齐css3前缀

安装postcss和autoprefixer

 npm i postcss-loader autoprefixer -D

使用

module.exports = {
        module:[{
            test: /\.less/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'less-loader',
                {
                    loader:'postcss-loader',
                    options:{
                        plugins: () => [
                            require('autoprefixer')({
                                overrideBrowserslist:['last 2 version','>1%','ios 7']
                            })
                        ]
                    }
                }
            ]
        }]
    }

结果：打包后，即可看到css3自动带上前缀了

移动端css的 px自动转换成rem

使用px2rem-loader
页面渲染时计算根元素的font-size值
- 这里可以使用手淘的lib-flexible库
- github.com/amfe/lib-fl…
安装

npm i px2rem-loader -D
npm i lib-flexible -S

使用

// webpack.config.js
     module.exports = {
         module:[{
             test:/\.less/,
             use:[
                 'css-loader',
                 'less-loader',
                 {
                     loader:'px2rem-loader',
                     options:{
                         remUnit:75,
                         remPrecesion:8,
                     }
                 }
             ]
         }]
     }

打包后px会自动转换为rem
在html文件里引入lib-flexible，必须在head中引入
这样就可以适配移动端了

静态资源内联

资源内联的意义

代码层面
- 页面框架的初始化脚本
- 上报相关打点
- css内联避免页面闪动
请求层面
- 减少http请求数

html，js,css内联

raw-loader 内联html

    <script>${require('raw-loader!babel-loader!./meta.html')}</script>

raw-loader 内联js

<script>$;{require('raw-loader!babel-loader!./index.js')}</script>

css内联
- 借助style-loader
- html-inline-css-webpack-plugin

module.exports={
        module:{
            rules:[{
                test:/\.less/.
                use:[{
                    loader:'style-loader',
                    options:{
                        insertAt:'top',//样式插入到head
                        singleton:true,//将所以style标签合并成一个
                    }
                }]
            }]
        }
    }

多页面打包通用方案

动态获取entry 和设置 html-webpack-plugin
利用 glob.sync

entry: glob.sync(path.join(__dirname,'./src/*/index.js'))

安装glob库

 npm i glob -D

源码目录需要按照下面规则
- 在src目录下创建各自的文件夹，如search文件夹，在search文件夹中，创建index.html和index.js。其他一样。
使用: 动态获取entry和htmlWebpackPlugin

const setMPA = () => {
        const entry = {};
        const HtmlWebpackPlugins = [];

        // 匹配到每个模块的文件夹
        const entryFiles = glob.sync(path.join(__dirname,'./src/*/index.js'))
        Object.keys(entryFiles).map(index => {
            const entryFile = entryFiles[index]; // 获取每个js文件的路径
            const match  = entryFile.match(/src\/(.*)\/index\.js/);
            const pageName = match && match[1]
            entry[pageName] =entryFile;
            HtmlWebpackPlugins.push(
                new HtmlWebpackPlugin({
                    template:path.join(__dirname,`src/${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
        }
    }
    const {entry,HtmlWebpackPlugins} = setMPA()
    module.exports = {
        entry:entry,
        // ...
        plugins:[...HtmlWebpackPlugins]
    }

source-map

作用：通过source map定位到源代码
开发环境开启，线上环境关闭。
- 线上排查问题的适合可以将source map上传到错误监控系统
source map 关键字
- eval:使用eval包裹模块代码
- source map:产生.map文件
- cheap: 不包含列信息
- inline: 将.map作为DataURI嵌入，不单独生成.map文件
- module:包含loader的sourcemap

使用

 module.exports = {
        // ...
        devServer:{
            contentBase:'./dist',
            hot: true
        },
        devtool:'source-map'
    }

运行即可生成.map文件

以上代码放到了github

可以下载调试。