webpack基础内容

一见如故

• chunk是中间过程的代码块，bundle是结果代码块
• entry指定入口文件
• output指定出口chunk和非出口chunk的输出名称及文件夹和打包目录（dist）
• module配置规则，每个规则有test、loader、options等属性
• plugins配置插件

---

产生chunk的三种途径

1、entry入口（单入口产生一个chunk，多入口产生多个chunk）
2、异步加载模块
3、代码分割（code spliting）
splitChunk: {
    cacheGroup: {
        vendor: 产生一个chunk
        common: 产生一个chunk
    }
}

entry

1、string（单入口）
// 打包形成一个chunk，此时chunk的名称默认是main。输出一个bundle文件
entry：'./src/index.js',
output: {
    filename:'[name].js',//此处那么就是main
}
 
2、array（多入口）
// 所有入口文件最终会形成一个chunk，输出只有一个bundle文件
// add.js会被打包到index.js中
// 只有在HMR功能中让html热更新生效用到
entry: ['./src/index.js', './src/index.html']
 
3、object（多入口）
// 有几个入口文件，就会形成几个chunk（chunk的名称就是key），输出几个bundle。
entry: {
    index: './src/index.js',
    add: './src/add.js'
}
 
4、组合用法
// 形成两个chunk，输出两个bundle文件；react和react-dom会形成一个chunk，输出到一个bundle中
// 在dll中会这么用
entry: {
    jquery: ['jquery'],
    vue: ['react', 'react-dom']
}

output

output: {
    // 指定名称和目录,此处name是chunk的名称
    filename: 'js/[name].js',
 
    // 将来所有资源输出的公共目录
    path: resolve(__dirname, 'dist'),
 
    // 所有资源引入的公共路径前缀，用于生产配置
    // 'imgs/a.jpg' => '/imgs/a.jpg'(服务器根目录下找imgs/a.jpg)
    publicPath: '/',
 
    // 非入口chunk的名称，如果不见这个配置，非入口的chunk会使用filename规则输出
    // 非入口的chunk指：import函数引入的js模块，或者node_modules里面分出的chunk
    chunkFilename: 'js/[name]_chunkhhh.js',
 
    // library相关配置只是在项目被别人用到，需要向外暴露时才有用
    // 整个库向外暴露的变量名
    library: '[name]',
    // 变量添加到xx上
    libraryTarget: 'window',
    // 变量以commonjs规范引入
    libraryTarget: 'commonjs'
},

module

module: {
    rules: [
        {
            test: /\.css/,
            // 多个loader用use
            use: ['style-loader', 'css-loader']
        },
        {
            test: /\.js$/,
            // 单个loader用loader
            loader: 'bable-loader',
            // 单个loader可加options配置选项
            options: {},
 
            // 排除node_modules下的文件，用作打包优化
            exclude: /node_modules/,
            // 只检查src下的js文件，用作打包优化
            include: resolve(__dirname, 'src'),
 
            // pre优先执行，post推迟执行
            enforce: 'pre'
        },
        {
            // 找到某个文件的处理的loader，就直接用，不再过后面的loader了，用作打包优化
            // 如js文件遇到babel-loader和eslint-loader，就只用其中一个，所以把eslint-loader写到oneof外面
            oneOf: [
                { test: /\.x1/, loader: 'xxx1' },
                { test: /\.x2/, loader: 'xxx2' }
            ]
        }
    ]
},

plugins

依赖包：html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
    // 默认创建一个html文件，并自动引入打包输出的所有资源
    // new HtmlWebpackPlugin()
    new HtmlWebpackPlugin({
        // 复制模板，并...
        template: './src/index.html',
        // 输出目录及名称
        filename: 'abc/index.html',
        // 压缩html
        minify: {
            // 移除空格
            collapseWhitespace: true,
            // 移除注释
            removeComments: true
        }
    })
]