webpack简述

webpack简单来说就是一个模块打包器，也是目前最流行的前端构建工具之一，他将整个项目根据依赖关系通过各种loader与plugin的处理后进行打包；可以实现对代码的各种处理，比如less、sass、stylus的解析，ecmascript版本的转换、代码的压缩分割等等

webpack之loader

loader可以说是webpack最核心的部分，前面所说的各种功能大部分就是又他完成的;loader简单来说就是一个导出为函数的JavaScript模块，webpack会配置文件申明的倒序调用loader，传入资源文件，经loader处理后传给下一loader或者webpack处理

常用loader

1.sass-loader、less-loader、stylus-loader、style-loader、css-loader
2.babel-loader
3.file-loader、url-loader
4.vue-loader
5.string-loader

webpack之plugin

plugin是webpack的重要组成部分，他能以各种钩子钩入每个编译(compilation)中触发的所有关键事件，插件都具备完全访问compiler对象的能力

常用plugin

1.HtmlWebpackPlugin，将入口js文件添加至html，并移至输出目录，可实现html压缩，去除引号等一些优化功能
2.CleanWebpackPlugin，每次打包之前清空指定目录
3.HotModuleReplacementPlugin，热更新代码，开发时使用
4.DefinePlugin，定义每个模块都能访问的变量
5.DllPlugin、DllReferencePlugin，预编译模块，可优化webpack打包速度
6.VueLoaderPlugin；将loader配置应用于vue单文件组件

以下是详细配置

webpack版本：4.x.x

{
    mode: 'development', // production:生产,会压缩代码；development:开发，不会压缩代码，便于debug
    
    devtool: 'inline-source-map',// 添加source map;便于debug,但会严重影响性能，千万不要在生产环境使用

    // webpack打包的入口
    entry: {
        app: './src/index.js', // 路径相对于package.json
        // app: ['./vue.js', './src/index.js']
    },

    // 文件输出
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, '../dist') // 输出的目录，默认为dist
    },
    optimization: {
        runtimeChunk: true,// 将webpack打包后的主文件单独分离，默认是将主文件放在入口文件当中，当需要在入口文件之前引入打包的公共代码时需要用到，此项建议对webpack有一定了解后再理解，关于打包后的代码分析我会单独写一篇

        // 抽离公共代码
        splitChunks: {
            cacheGroups: {
                vendor: { // 抽离第三方插件
                    test: /node_modules/, // 指定是 node_modules 下的第三方包
                    chunks: 'initial', // initial 对于异步导入的文件不处理;async 异步chunk，只对异步导入的文件处理;all 全部chunk
                    name: 'common/vendor', // 打包后的文件名，任意命名,会逆优化首屏加载的速度,慎用，建议每个公共代码块都单独抽离或者手动配置
                    priority: 10 // 设置优先级，防止和自定义的公共代码提取时被覆盖，不进行打包
                },
                utils: { // 抽离自定义公共代码
                    test: /\.js$/,
                    chunks: 'initial',
                    name: true, // 每个页面的包只包含需要的文件,不会影响首屏加载的速度，good job
                    minSize: 0 // 只要超出 0 字节就生成一个新包,默认30000B
                }
            }
        }
    },
    module: {
        rules: [

            // 打包css文件需要用到的loader
            // 注意：loader的执行顺序是后面的先执行
            //      style-loader必须在css-loader的前面
            {
                test: /\.css$/,
                use: [

                    // 将css文件以style标签形式插入
                    {
                        loader: 'style-loader',
                        options: {
                            singleton: true // 设置为true,多个css文件会在同一个style标签内
                        }
                    },
                    'css-loader'
                ],
                include: path.resolve(__dirname, '../src') // 只处理对应目录下的文件，构建性能提升
            },

            {
                test: /\.js$/,
                use: [
                    'babel-loader', // 配置babel转换代码
                ],
                exclude: path.resolve(__dirname, '../node_modules')
            }
        ]
    },
    plugins: [

        // 在每次打包前清理dist目录
        // 注意配置删除dist目录下的所有文件，而不是dist目录，因为当dist目录其他程序打开时将无法删除
        new CleanWebpackPlugin(['dist/*'], {
            root: path.resolve(__dirname, '../')
        }),

        // 用于处理入口html，如自动注入entry对应js,并拷贝至压缩目录等等
        new HtmlWebpackPlugin({
            template: './src/index.html',

            // 压缩html
            minify: {
                removeComments: true, // 删除注释
                collapseWhitespace: true, // 删除空格
                removeAttributeQuotes: true // 删除属性的引号
            }
        })
    ],
    
    // 配置后webpack会跳过对应模块的打包，当使用cdn时需要用到，此项能提升构建性能与前端性能
    externals: {
        vue: 'vue'
    }
}