webpack深入探讨

css自动补齐前缀

使用postCss插件的  autoprefixer 的自动补全，根据can I use 规则

// 建议 mini-css-extract-plugin 与 css-loader 一起使用, 该插件与style-loaader互斥
module.exports = {
    entry: {
        app: './src/app.js',
        home: './src/index.js'
    },
    output: {
        filename: '[name]_[chunkhash:8].js',
        path: __dirname + '/dist'
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name]_[contenthash:8].css'
        })
    ],
    module: {
        rules: [{
            test: /\.less$/,
            use: [
                MiniCssExtractPlugin.loader, 
                'css-loader',
                'less-loader',
                {
                    loader: 'postcss-loader',
                    options: {
                        plugins: () => {
                            require('autoprefixer')({
                                browsers: ['last 2 version', '>1%', 'ios 7']
                            })
                        }
                    }
                }, {
                    loader: 'px2rem-loader',
                    options: {
                        // rem相对于px转换的单位，此处即1rem = 75px
                        remUnit: 75,
                        // 小数点位数
                        remPrecision: 8
                    }
                }
            ],
        }]
    }
}

移动端css  px自动转换成rem

使用px2rem-loader         

页面渲染时计算根元素的font-size值

可以使⽤用⼿手淘的lib-flexible库     

https://github.com/amfe/lib-flexible

资源内联

意义：1. 代码层面：页面框架的初始化脚本，上报相关打点，css内联避免页面闪动。2. 请求层面：减少http请求，如小图片或者字体的内联(url-loader)

html和js的内联

raw-loader （v0.5版本） 内联 html

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

raw-loader 内联JS

<script>${require('raw-loader!babel-loader!../node_modules/lib-flexible')}</script>

css内联

1. 借助于style-loader    2. 使用html-inline-css-webpack-plugin

多页面应用

每⼀次⻚面跳转的时候，后台服务器都会给返回⼀个新的html⽂档，这种类型的网站也就是多⻚网站，也叫做多⻚应用。

多页应用的打包基本思路：每个页面对应一个entry，一个html-webpack-plugin    

缺点：每次新增或删除页面需要修改webpack配置

解决方案：利用glob.sync 动态获取entry和设置html-webpack-plugin数量

// 多页应用打包通用方案
const glob = require('glob')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const setMap = () => {
    const entry = {}
    const htmlWebpackPlugins = []
    const entryFiles = glob.sync(path.join(__dirname, './src/*/index.js'))
    Object.keys(entryFiles).forEach((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/${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
    }
}
module.exports = {
    entry: setMap.entry,
    output: {
        filename: '[name]_[chunkhash:8].js',
        path: __dirname + '/dist'
    },
    plugins: [
        
    ].concat(setMap.htmlWebpackPlugins)
}

Source map

作用：通过source map可以定位到源代码。

开发环境开启，线上环境关闭。

线上排查问题的时候可以将sourcemap上传到错误监控系统。

关键字：

eval: 使用eval包裹模块代码

source map: 产生.map文件

cheap: 不包含列信息

inline: 将.map作为DataURI嵌入，不单独生成.map文件

module: 包含loader的sourcemap