webpack

webpack有什么优点或者缺点

webpack是模块化打包工具
优点：
— 可以模块化的打包任何资源,适配任何模块系统,适合SPA单页应用的开发
— plugins插件丰富，能做的事情非常多；
— 社区活跃,能为大多数场景找到已有的开源扩展
spa单页面应用（[https://blog.csdn.net/jiang7701037/article/details/93243545](https://blog.csdn.net/jiang7701037/article/details/93243545）

缺点：
— 对初学者不利，调试很难定位问题
— 配置复杂,通过babel编译后的js代码打包后体积过大

webpack自己用的过程中遇到过什么问题，怎么解决的

1 打包速度慢，因为babel-loaders上,babel-loaders非常耗时的语法转换
解决方法：主要就是用include和exclude来包含或者排除范围

module:{
        loaders:[{
            test:/\.js$/,
            loader:'babel-loader',
            exclude:/node_modules/,
            query:{
                presets:["es2015"]
            }
        }]
    }

但是问题来了，其实这样的速度提升并不明显，用include才能明显地提升速度

module:{
        loaders:[{
            test:/\.js$/,
            loader:'babel-loader',
            exclude:/node_modules/,
            include:/src/,
            query:{
                presets:["es2015"]
            }
        }]
    }

2 使用babel进行es6转换时,报错：fileSystem.statSync is not a function
解决方法：
如果babel-loader >= 7.0.0 那么webpack >=2.2.0

如果webpack>4.x 则babel-loader >7.0

有什么方法可以避免webpack打出的包太大

1 提取带三方库
使用插件 optimization.splitChunks配置将第三方库分离打包到vendors.js文件中
像 react 这个库的核心代码就有 627 KB，这样和我们的源代码放在一起打包，体积肯定会很大。所以可以在 webpack 中设置

{
  entry: {
   bundle: 'app'
    vendor: ['react']
  }

  plugins: {
    new webpack.optimize.CommonsChunkPlugin('vendor',  'vendor.js')
  }
}

这样打包之后就会多出一个 vendor.js 文件，之后在引入我们自己的代码之前，都要先引入这个文件。比如在 index.html 中

<script src="/build/vendor.js"></script>
 <script src="/build/bundle.js"></script>

插件配置

plugins:[
      optimization: {
          // 找到chunk中共享的模块,取出来生成单独的chunk
          splitChunks: {
            chunks: "all",  // async表示抽取异步模块，all表示对所有模块生效，initial表示对同步模块生效
            cacheGroups: {
                vendors: {  // 抽离第三方插件
                    test: /[\\/]node_modules[\\/]/,     // 指定是node_modules下的第三方包
                    name: "vendors",
                    priority: -10                       // 抽取优先级
                },
                utilCommon: {   // 抽离自定义工具库
                    name: "common",
                    minSize: 0,     // 将引用模块分离成新代码文件的最小体积
                    minChunks: 2,   // 表示将引用模块如不同文件引用了多少次，才能分离生成新chunk
                    priority: -20
                }
            }
        },
]

2 代码压缩
webpack 自带了一个压缩插件 UglifyJsPlugin，只需要在配置文件中引入即可

  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
}

加入了这个插件之后，编译的速度会明显变慢，所以一般只在生产环境启用。
另外，服务器端还可以开启 gzip 压缩，优化的效果更明显
3 代码分割
什么是代码分割呢？我们知道，一般加载一个网页都会把全部的 js 代码都加载下来。但是对于 web app 来说，我们更想要的是只加载当前 UI 的代码，没有点击的部分不加载。

看起来好像挺麻烦，但是通过 webpack 的 code split 以及配合 react router 就可以方便实现。具体的例子可以看下 react router 的官方示例 huge apps。不过这里还是讲下之前配置踩过的坑。

code split 是不支持 ES6 的模块系统的，所以在导入和导出的时候千万要注意，特别是导出。如果你导出组件的时候用 ES6 的方式，这时候不管导入是用 CommomJs 还是 AMD，都会失败，而且还不会报错！

当然会踩到这个坑也是因为我刚刚才用 NodeJS，而且一入门就是用 ES6 的风格。除了这个之外，还有一点也要注意，在生产环境的 webpack 配置文件中，要加上 publicPath

output: {
    path: xxx,
    publicPath: yyy,
    filename: 'bundle.js'
}

不然的话，webpack 在加载 chunk 的时候，路径会出错。
4 设置缓存
对于静态文件，第一次获取之后，文件内容没改变的话，浏览器直接读取缓存文件即可。
那如果缓存设置过长，文件要更新怎么办呢？
打包后的文件名加入了 hash 值

output: {
    path: xxx,
    publicPath: yyy,
    filename: '[name]-[chunkhash:6].js'
}

5 对于在开发环境下才有用的东西在打包到生产环境时通通去掉。

项目太大以后，构建速度很慢，用什么方法提速？

1使用HappyPack来加速构建
HappyPack会采用多进程去打包构建，使用方式还是蛮简单的，但并不是支持所有的loader

2 优化构建时的搜索路径
在webpack打包时，会有各种各样的路径要去查询搜索，我们可以加上一些配置，让它搜索地更快
比如说，方便改成绝对路径的模块路径就改一下，以纯模块名来引入的可以加上一些目录路径
还可以善于用下resolve alias别名 这个字段来配置

3 不需要打包编译的插件库换成全局<script>标签引入的方式
比如jQuery插件，react, react-dom等，代码量是很多的，打包起来可能会很耗时
可以直接用标签引入，然后在webpack配置里使用 expose-loader 或 externals 或 ProvidePlugin 提供给模块内部使用相应的变量

use: [{
                loader: 'expose-loader',
                options: '/pre>
            }, {
                loader: 'expose-loader',
                options: 'jQuery'
            }]

// @2
externals: {
        jquery: 'jQuery'
    },

// @3
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }),</pre>

4热更新热替换
webpack支持监听模式，此时需要重新编译时就可以进行增量构建，增量构建是很快的，基本不到一秒或几秒之内就能重新编译好
注意区分一下开发环境和线上环境，开发环境启用热更新替换

// 开发环境设置本地服务器，实现热更新
    devServer: {
        contentBase: path.resolve(__dirname, 'static'),
        // 提供给外部访问
        host: '0.0.0.0',
        port: 8388,
        // 允许开发服务器访问本地服务器的包JSON文件，防止跨域
        headers: {
            'Access-Control-Allow-Origin': '*'
        },
        // 设置热替换
        hot: true,
        // 设置页面引入
        inline: true
    },

    // 文件输出配置
    output: {
        // 设置路径，防止访问本地服务器相关资源时，被开发服务器认为是相对其的路径
        publicPath: 'http://localhost:8188/dist/js/',
    },

// 插件配置
    plugins: [
        // 热更新替换
        new webpack.HotModuleReplacementPlugin()
    ]

5 babel-loader开启缓存

babel-loader在执行的时候，可能会产生一些运行期间重复的公共文件，造成代码体积大冗余，同时也会减慢编译效率
可以加上cacheDirectory参数或使用 transform-runtime 插件试试

6使用异步的模块加载
这个算是可以减小模块的体积吧，在一定程度上也是为用户考虑的，使用require.ensure来设置哪些模块需要异步加载，webpack会将它打包到一个独立的chunk中，
在某个时刻（比如用户点击了查看）才异步地加载这个模块来执行

$('.bg-input').click(() => {
    console.log('clicked, loading async.js')

    require.ensure([], require => {

        require('./components/async2').log();
        require('./components/async1').log();
        console.log('loading async.js done');
    });
});

5怎么基于webpack做工程化

1 提高构建速度
— Resolve阶段提速，加快文件查找速度
— loader 执行阶段提速，减少要被 loader 执行的文件数量
2 优化构建输出
— tree-shaking 删除冗余的代码
代码压缩
js 代码压缩
css 代码压缩
—拆包
异步加载
抽出第三方库

5webpack热更新原理