webpack4用法

目录

1. entry

2. output

3. hash

4. mode

5. devtool

6. optimization

7. resolve 

8. module.rules

9. 常用的plugin


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'
            ],
        }
    ],
}

9. 常用的plugin

UglifyJsPlugin 压缩js代码

HtmlWebpackPlugin 自动生成HTML模板,并将打包后的js文件插入HTML中。

MiniCssExtractPlugin 提取css代码 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值