webpack学习

核心思想：一切皆模块；按需加载

 

一.webpack 打包过程

1.从入口文件开始分析应用的依赖树

2.将每个依赖模块包装起来放到一个数组中等待调用

3.把执行入口文件的逻辑放到一个立即执行函数中执行

 

 

二.loader 与 plugin

1.loader

　　loader是文件加载器，能够加载资源文件，并对这些文件进行编译、处理，最终一起打包到指定的文件中(比如.vue,.jsx.css文件。比如装换ES6到ES5)

2.plugin

　　plugin是扩展器，它是基于事件机制工作，会监听webpack打包过程中的某些事件节点，执行任务(比如打包完成后压缩代码，比如热更新)

 

 

三.webpack性能优化

1.打包结果优化(空间)

①减少打包体积，去除无用代码 ②代码压缩

2.构建过程优化(时间)

①happypack多进程处理文件 ②进行增量构建，缓存处理过的文件

 

 

 

 

四.我的webpack配置

const path = require('path')
const webpack = require('webpack')
const uglifyjs = require('uglifyjs-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const HappyPack = require('happypack');
const os = require('os');
//根据cpu数量创建线程池
const happyThreadPool = HappyPack.ThreadPool({
    size: os.cpus().length
});


module.exports = {
    optimization: {
        minimizer: [new TerserPlugin({
            //加快构建速度
            cache: true,
            terserOptions: {
                compress: {
                    unused: true,
                    drop_debugger: true,
                    drop_console: true,
                    dead_code: true
                }
            }
        })]
    },
    entry: './src/index.js', // 入口文件
    output: {
        path: path.join(__dirname, 'dist'), // 打包后文件放入的文件夹
        filename: 'bundle.js'
    },
    devServer: {
        port: 3001,
        publicPath: '/dist',
        open: false,
        hot: true,
        // contentBase: 'dist' //指定打开浏览器显示的目录，默认为根目录（项目目录）
    },
    resolve: { // 不写后缀的文件
        extensions: ['.jsx', '.js', '.json']
    },
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    'babel-loader',
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.jsx?/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'happypack/loader?id=jsx',
                    },
                    {
                        loader: 'babel-loader',
                        options: {
                            babelrc: false,
                            presets: [
                                require.resolve('@babel/preset-react'),
                                require.resolve('@babel/preset-env', {
                                    modules: false
                                })
                            ]
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new uglifyjs(),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'src/index.html'),
            filename: 'index.html'
        }),
        new webpack.HotModuleReplacementPlugin(),
        new BundleAnalyzerPlugin(),
        new HappyPack({
            id: 'jsx',
            threadPool: happyThreadPool,
            loaders: ['babel-loader']
        })
    ],
    // mode: 'production',
}