webpack学习笔记（3）

1、HTML、CSS和JS代码压缩

  • JS文件的压缩
    webpack4内置了uglifyjs-webpack-plugin该压缩插件
  • CSS文件的压缩
    使用optimize-css-assets-webpack-plugin插件
    同时使用cssnano
    cnpm i optimize-css-assets-webpack-plugin -D
    cnpm i cssnano -D
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
new OptimizeCSSAssetsPlugin({
  assetNameRegExp: /\.css$/g,
  cssProcessor: require('cssnano')
})
  • html压缩
  • cnpm i html-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin')
new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src/index.html'),
            filename: 'index.html',
            chunks: ['index'],
            inject: true,
            minify: {
                html5: true,
                collapseWhitespace: true,
                preserveLineBreaks: false,
                minifyCSS: true,
                minifyJS: true,
                removeComments: false
            }
        })

2、清理构建目录

  • 通过npm scripts清理构建目录
    rm -rf ./dist && webpack 或
    rimraf ./dist && webpack
  • 使用clean-webpack-plugin插件，默认会删除output指定的输出目录
    cnpm i clean-webpack-plugin -D
plugins: [
  new CleanWebpackPlugin()
]

3、PostCSS插件autoprefixer自动补全CSS前缀

image.png

CSS3属性兼容性查询

  • cnpm i postcss-loader autoprefixer -D 安装依赖
{
              test: /.less$/,
              use: [
                // 'style-loader', // 和miniCssExtractPlugin.loader互斥
                MiniCssExtractPlugin.loader,
                'css-loader',
                'less-loader',
                {
                    loader: 'postcss-loader', 
                    options: {
                        plugins: () => [ 
                            require('autoprefixer')({
                                browsers: ["last 2 version", "> 1%", "iOS 7"]                       
                        
                            })
                        ]
                    }
                }
              ]
            },

4、移动端CSS px自动转rem

W3C对rem的定义：font-size of the root element

  • cnpm i px2rem-loader -D 安装依赖
  • cnpm i lib-flexible -S 安装依赖
    页面渲染时计算根元素的font-size值
  • 可以使用手淘的lib-flexible库
{
              test: /.less$/,
              use: [
                // 'style-loader', // 和miniCssExtractPlugin.loader互斥
                MiniCssExtractPlugin.loader,
                'css-loader',
                {
                    loader: 'postcss-loader', 
                    options: {
                        plugins: () => [ 
                            require('autoprefixer')({
                                browsers: ["last 2 version", "> 1%", "iOS 7"]                       
                        
                            })
                        ]
                    }
                },
                {
                    loader: 'px2rem-loader',
                    options: {
                        remUnit: 75,
                        remPrecision: 8
                    }
                },
                'less-loader'
              ]
            },

px转rem的demo有一个问题，search.less文件的代码，您只写了一层{}的代码，如果里面再嵌套一层{}，那么编译的时候会报错，错误原因是先执行了px2rem-loader编辑，less-loader在后面，module.rules 里less-loader应该写在px2rem-loader后面

5、资源内联的意义

代码层面：

  • 页面框架的初始化脚本
  • 上报相关打点
  • css内联避免页面闪动
    请求层面：减少http网络请求
  • 小图片或则字体内联（url-loader）
    html内联
  • cnpm i raw-loader@0.5.1 -D
    添加以下代码会报错
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
     ${ require('raw-loader!./meta.html') }
    <script>
        ${ require('raw-loader!babel-loader!../node_modules/_lib-flexible@0.3.2@lib-flexible/fiexible.js') }
    </script>
</head>

5、多页面应用打包通用方案

  • cnpm i glob -D
const glob = require('glob');
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];
            // '/Users/cpselvis/my-project/src/index/index.js'

            const match = entryFile.match(/src\/(.*)\/index\.js/);
            const pageName = match && match[1];

            entry[pageName] = entryFile;
            htmlWebpackPlugins.push(
                new HtmlWebpackPlugin({
                    inlineSource: '.css$',
                    template: path.join(__dirname, `src/${pageName}/index.html`),
                    filename: `${pageName}.html`,
                    chunks: ['vendors', 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: [
        new MiniCssExtractPlugin({
            filename: '[name]_[contenthash:8].css'
        }),
        new OptimizeCSSAssetsPlugin({
            assetNameRegExp: /\.css$/g,
            cssProcessor: require('cssnano')
        }),
        new CleanWebpackPlugin()
    ].concat(htmlWebpackPlugins)

6、使用source map

作用：通过source map定位到源码

eval: 使⽤用eval包裹模块代码
source map: 产⽣生.map⽂文件
cheap: 不不包含列列信息
inline: 将.map作为DataURI嵌⼊入，不不单独⽣生成.map⽂文件
module:包含loader的sourcemap


image.png
  • 开发环境调试设置devtool为source-map能看到源代码，方便排查定位问题
    设置成cheap-source-map代码出错时只能定位到行的报错信息
  • 生产环境设置成source-map会生成把.js.map和js
  • 生产环境设置成inline-source-map会把.js.map和js合并

7、提取公共资源

  • cnpm i html-webpack-externals-plugin -D 安装依赖
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin')
plugins: [
       // 引入CDN，缩小打包体积
   new HtmlWebpackExternalsPlugin({
     externals: [
       {
         module: 'react',
         entry: 'https://11.url.cn/now/lib/16.2.0/react.min.js',
         global: 'React',
       },
       {
         module: 'react-dom',
         entry: 'https://11.url.cn/now/lib/16.2.0/react-dom.min.js',
         global: 'ReactDOM',
       }
     ],
   })
]

<body>
   <div id="root"></div>
   <script type="text/javascript" src="https://11.url.cn/now/lib/16.2.0/react.min.js"></script>
   <script type="text/javascript" src="https://11.url.cn/now/lib/16.2.0/react-dom.min.js"></script>
</body>
</html>
  • 提取公共资源
htmlWebpackPlugins.push(
                new HtmlWebpackPlugin({
                    // 需要设置提取公共资源指向vendors位置
                    chunks: ['vendors', pageName],
                    inject: true,
                })
            );
optimization: {
        splitChunks: {
                        // 公共资源最小为minSize才可提取
            minSize: 0,
            cacheGroups: {
                commons: {
                                        // 提取文件夹名
                    name: 'commons',
                    chunks: 'all',
                                        // 至少minChunks处使用才可提取
                    minChunks: 2
                }
            } 
        }
    }

8、tree shaking（摇数优化）

  • production生产环境下默认tree shaking是打开的其它均是未开启

概念:1 个模块可能有多个⽅方法，只要其中的某个⽅方法使⽤用到了了，则整个⽂文件都会被打到 bundle ⾥里里⾯面去，tree shaking 就是只把⽤用到的⽅方法打⼊入 bundle ，没⽤用到的⽅方法会在 uglify 阶段被擦除掉。
使⽤用:webpack 默认⽀支持，在 .babelrc ⾥里里设置 modules: false 即可 · production mode的情况下默认开启
要求:必须是 ES6 的语法，CJS 的⽅方式不不⽀支持

Tree-shaking 原理理
利利⽤用 ES6 模块的特点: ·只能作为模块顶层的语句句出现
· import 的模块名只能是字符串串常量量
· import binding 是 immutable的 代码擦除: uglify 阶段删除⽆无⽤用代码

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • webpack学习笔记
    http://blog.csdn.net/weizengxun/article/details/53448885 ...
    晓卢轩阅读 630评论 0赞 0
  • 从0到1构建webpack4.1.0项目
    初始化项目 进入一个文件夹作为项目的根目录 npm init 新建src, dist目录，package.json...
    love_program阅读 1,249评论 0赞 4
  • webpack3.0开发笔记
    非常感谢胖哥的博客和掘金小册的技术分享，希望大家去下面的链接去查看原文，他们写的非常好，都是多个项目经验的总结！！...
    示十阅读 2,293评论 0赞 2
  • webpack学习笔记
    全局安装webpack 全局安装webpack会有个问题，就是当你有两个项目依赖于不同版本的webpack，就会有...
    説好的妹紙呢阅读 1,867评论 0赞 11
  • 读书侠《深度工作》
    这本书建议速读，前三章可以快速浏览，后4章中的一些观点值得参考。 【1】工作要深入 有四种深度哲学，禁欲主义（完全...
    关七666阅读 192评论 1赞 3