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
        }
    })
]

你可能感兴趣的:(webpack,webpack,javascript,前端)