webpack使用与配置

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

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

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

optimization里面的相关配置：

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

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

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

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

magic comments

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

package.json里面的scripts配置：

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

设置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'] // 顺序不能变
    }

设置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)

配置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 和第三方模块的映射

webpack可视化打包结果：

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

关于tree shaking:

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

关于配置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