webpack4用法

也无风雨丶

已于 2022-06-16 20:16:28 修改

阅读量311

点赞数

CC 4.0 BY-SA版权

文章标签： webpack javascript 前端

于 2020-11-15 11:32:50 首次发布

本文链接：https://blog.youkuaiyun.com/foradmin/article/details/95477503

1. entry

webpack的入口

// 单文件写法
entry: {
    index: '/app/index.js',
    about: '/app/about.js',
}

// 多文件写法，将多个文件打包到同一个bundle中
entry: {
    index: ['webpack-hot-middleware/client', '/app/index.js'],
    vendors: ['react', 'react-dom', 'redux', 'react-router'],
}

2. output

webpack的输出，指示webapck如何输出、以及输出到哪里、输出的格式等。

path：输出文件的目录。

filename：输出的文件名，一般跟entry配置相对应。

chunkFilename：块，非入口entry模块，会自动拆分文件，也就是常说的按需加载，与路由中的require.ensure相对应

publicPath：文件输出的公共路径

output: {
    path: path.resolve(__dirname, '/assets'),
    // entry中的文件对应的文件名
    filename: 'js/[name].js',
    // 动态加载的文件对应的文件名
    chunkFilename: 'js/[name].[chunkhash:8].js',
    publicPath: '/static/',
}

// 按需加载
// webpack会以'./chunk'为新的入口生成一个chunk
// 代码只有执行到import语句时，才会动态加载chunk对应的文件
// import返回一个promise对象，可以调用then方法接受返回值
import(/* webpackChunkName: 'chunkName' */ './chunk').then();

3. hash

常用的hash有三种：

hash：模块标识符，一般应用于filename。

chunkhash：按需加载内容的hash，根据chunk自身的内容计算而来。

contenthash：提取css文件时根据内容计算而来的hash

4. mode

webpack4 新增的

// development，开发环境，代码不会被压缩，开启代码调试
// production，生产环境，会压缩代码，关闭调试
mode: 'development' || 'production';

5. devtool

控制是否生成，以及如何生成source map文件，开发环境下有利于定位问题，默认false。

开启会影响编译速度，所以生产环境要关闭。

devtool: 'eval-source-map';

6. optimization

optimization是webpack4新增的，主要用于开发者自定义优化构建打包的策略配置。

minimize：true/false，告诉webpack是否开启代码最小化压缩。

minimizer：自定js优化配置，会覆盖默认配置，结合UglifyJsPlugin插件使用。

removeEmptyChunks: bool值，检测并删除空的块。

splitChunks：取代了CommonsChunkPlugin，自动分包拆分、代码拆分。

splitChunks: {
  chunks: 'async',
  minSize: 30000,
  maxSize: 0,
  minChunks: 1,
  maxAsyncRequests: 5,
  maxInitialRequests: 3,
  automaticNameDelimiter: '~',
  name: true,
  cacheGroups: {
    vendors: {
      test: /[\\/]node_modules[\\/]/,
      priority: -10
    },
    default: {
      minChunks: 2,
      priority: -20,
      reuseExistingChunk: true
    }
  }
}

7. resolve

配置模块如何解析

extensions：自动解析确定的扩展名，扩展名自动补齐。

alias：配置路径一些别名。

modules： webpack解析模块时应该搜索的目录。

resolve {
    extensions: ['.js', '.jsx', 'css', 'scss'],
    alias: {
        src: path.resolve(__dirname, '../src'),
    },
    modules: ['node_modules'],
}

8. module.rules

rules：之前的loaders

test：正则表达式，匹配编译的文件

exclude：排出的文件

include：正好与exclude相反

use-loader：相当于test匹配到的文件的解析器

user-options：配合loader使用，可以是字符串或者对象

modules: {
    rules: [
        {
            test: /\.jsx?$/,
            use: ['babel-loader'],
        },
        {
            test: /\.s?css$/,
            use: [
                'style-loader', 
                'css-loader',
                {
                    loader: 'postcss-loader',
                    options: {
                        plugins: () => [require('autoprefixer')],
                    },
                }, 
                'postcss-loader', 
                'sass-loader'
            ],
        }
    ],
}