webpack使用与配置（上）

1. clean-webpack-plugin的正确使用姿势：

   const { CleanWebpackPlugin } = require('clean-webpack-plugin');
   

   答应我，不会用的去看看文档好吧。。。

2. optimization里面的相关配置：

   • 设置minChunks指的是有几个entrypoint进去形成的chunk用到了该module，如果达到了该值就会进行分割。
   • chunks的参数有async（默认，对异步引入的module进行分割），initial（对同步引入的module进行分割），all（对所有形式引入的module进行分割）

3. webpack4中的production模式其实已经默认采用了uglifyjs

4. 在进行异步引入操作时需要引进新的插件npm install @babel/plugin-syntax-dynamic-import -D，并修改babel配置：

   {
       "presets": [["@babel/preset-env", {
           "corejs": 2,
           "useBuiltIns": "usage"
       }]],
       "plugins": ["@babel/plugin-syntax-dynamic-import"]
   }
   

5. magic comments

   • webpackChunkname
   • webpackPrefetch: prefetch chunk 会在父 chunk 加载结束后开始加载。
   • webpackPreload: preload chunk 会在父 chunk 加载时，以并行方式开始加载。

6. package.json里面的scripts配置：

   "scripts": {
       "build": "webpack --config ./config/webpack.config.js",
       "dev": "webpack-dev-server --config ./config/webpack.config.js"
   },
   

7. 设置postcss需要几步操作：

   • npm install postcss-loader autoprefixer -D
   • 在根目录下添加postcss.config.js，并添加以下代码：

       module.exports = {
           plugins: [require('autoprefixer')]
       }
   

   • 修改webpack.config.js里面的配置：

       {
           test: /\.(sass|scss)$/,
           use: ['style-loader','css-loader','sass-loader','postcss-loader'] // 顺序不能变
       }
   

8. 设置css模块的模块化：

   • 修改webpack.config.js的配置：

       {
           test: /\.scss$/,
           use: ['style-loader', {
               loader: 'css-loader',
               options: {
                   modules: true
               }
           }, 
           'sass-loader', 'postcss-loader'],
       }
   

   • 修改index.js里面引入css文件的方式：原理其实就是在打包css文件的时候修改以下css文件里面的类名来防止命名的冲突，如此一来使用时就需要动态的使用类名了

       import style from './index.scss';
       document.querySelector('.d2').classList.add(style.d2)
   

9. 配置sourceMap：

   • source-map: 最大而全，会生成独立的map文件，精确到行和列，打包速度慢
   • cheap-sourse-map: 相对于上面这种区别在于映射到行为止，打包速度快一些，也会产生独立的map文件
   • inline-source-map: 映射文件以 base64 格式编码，加在 bundle 文件最后，不产生独立的 map 文件。加入 map 文件后，我们可以明显的看到包体积变大了；
   • cheap-module-eval-source-map: 这个一般是开发环境（dev）推荐使用，在构建速度报错提醒上做了比较好的均衡。
   • cheap-module-source-map: 一般来说，生产环境是不配 source-map 的，如果想捕捉线上的代码报错，我们可以用这个

   eval: 打包后的模块都使用 eval() 执行，行映射可能不准；不产生独立的 map 文件

   cheap: map 映射只显示行不显示列，忽略源自 loader 的 source map

   inline: 映射文件以 base64 格式编码，加在 bundle 文件最后，不产生独立的 map 文件

   module: 增加对 loader source map 和第三方模块的映射

10. webpack可视化打包结果：

        npm install webpack-bundle-analyzer -D
        const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
    

11. 关于tree shaking:

    • 首先tree shaking只有在es6模块中才会适用，因为es6模块是编译时加载的，支持静态分析，而以往的commonjs模块则是运行时加载，不能静态分析，也就无法进行tree shaking了
    • import命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。但是如果import进来的是一个对象，那么改变属性是可以做到的，但是极力不推荐这么做，因为会影响到其他使用该变量的模块。
    • export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。
    • import语句是应该写在顶层作用域的，（否则会报错）只有这样才可以支持静态分析，但是可以通过polyfill的方式来支持在块作用域内使用import。

12. 关于配置proxy的坑：

        proxy: {
            '/api/ganhuo': {
                target: 'http://gank.io/api',
                changeOrigin: true,
            }
        }
    

    一开始是像上面这样写的proxy，目标请求地址是http://gank.io/api/xiandu/categories，但是在代码中这样axios.get('/api/ganhuo/xiandu/categories')请求时会报404错误，原因是什么呢？把proxy配置修改成下面这样就可以了：

        proxy: {
            '/api/ganhuo': {
                target: 'http://gank.io/api',
                changeOrigin: true,
                pathRewrite: {
                    '^/api/ganhuo': ''
                }
            }
        }
    

    因为不写pathRewrite时，相当于webpack认出了/api/gank开头的内容，知道需要代理到http://gank.io/api，但是问题在于，webpack只是简单的把请求的/api/ganhuo/xiandu/categories拼接到了http://gank.io/api后面，最后请求的目标就是http://gank.io/api/api/ganhuo/xiandu/categories，很明显是不对的，所以需要写一个pathRewrite

后续内容请阅读webpack使用与配置（下）