webpack3和webpack4区别

2022-08-23 15:31:41 阅读：169 来源： 互联网

标签：exports webpack4 webpack3 plugin babel 区别 loader true css

1.mode

webpack增加了一个mode配置，只有两种值development | production。对不同的环境他会启用不同的配置。

webpack4中通过内置的mode使用相应模式的内置优化。比如设置mode等于'development'，会将 process.env.NODE_ENV 的值设为 development。设置mode等于'production'，会将 process.env.NODE_ENV 的值设为 production。production 侧重于打包后的文件大小，development侧重于构建。

2.CommonsChunkPlugin

webpack.optimize.CommonsChunkPlugin已经从webpack4中移除。可使用optimization.splitChunks进行模块划分（提取公用代码）。

但是需要注意一个问题，默认配置只会对异步请求的模块进行提取拆分，如果要对entry进行拆分，需要设置optimization.splitChunks.chunks = 'all'。

对应之前我们拆分runtime的情况，现在也有一个配置optimization.runtimeChunk，设置为true就会自动拆分runtime文件

module.exports = {
  optimization: {
    runtimeChunk: true,
    splitChunks: {
      vendors: {
        name:  'venders',
        chunks:  'all',
        minChunks: 2
    }
  }
}

3.mini-css-extract-plugin （CSS文件提取）

webpack4，删除原 extract-text-webpack-plugin 配置，增加 mini-css-extract-plugin 配置

注意：mini-css-extract-plugin 的 filename 选项不支持函数

module.exports = {
  plugins: [
    new  MiniCssExtractPlugin({
      filename:  'css/[name].css'
    }),
  ],
}

module.exports = {
  module: {
    rules: [
      {
        test:/\.vue$/,
        loader: 'vue-loader',
      },
      { test: /\.css$/,
         use: [
                  {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                      publicPath: '../',
                      hmr: process.env.NODE_ENV === 'development',
                    },
                  },
                  'css-loader',
                ],
        },
    ]
  }
}

4.安装依赖

新版 babel 使用新的命名空间 @babel

@babel/core
@babel/plugin-proposal-class-properties
@babel/plugin-proposal-decorators
@babel/plugin-syntax-dynamic-import
@babel/plugin-transform-runtime
@babel/preset-env
@babel/runtime
babel-loader
@babel/polyfill

//.babelrc
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            "&gt; 1%",
            "last 2 versions",
            "ie &gt;= 11"
          ]
        },
        "useBuiltIns": "usage" // 按需引入 polyfill
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-syntax-dynamic-import",
    ["@babel/plugin-proposal-class-properties", { "loose": false }],
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
  ]
}

5.vue-loader。

vue-loader 15 注意要配合一个 webpack 插件才能正确使用

const { VueLoaderPlugin } = require('vue-loader') 

module.exports = {
  plugins: [ new VueLoaderPlugin() ]
}

6.UglifyJsPlugin

现在也不需要使用这个plugin了，只需要使用optimization.minimize为true就行，production mode下面自动为true

optimization.minimizer可以配置你自己的压缩程序

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({ // 压缩js
          cache:  true,
          parallel:  true  //开启多线程
        }
      }),
      new OptimizeCSSAssetsPlugin({ // 压缩css
        cssProcessorOptions: {
          safe: true
        }
      })
    ]
  }
}

7.移除loaders，必须使用rules（在3版本的时候loaders和rules 是共存的但是到4的时候只允许使用rules）

8.支持es6的方式导入JSON文件，并且可以过滤无用的代码

let jsonData = require('./data.json')
import jsonData from './data.json'
import { first } from './data.json' // 打包时只会把first相关的打进去

{
  test: /\.json$/,  //用于匹配loaders所处理文件拓展名的正则表达式
  use: 'json-loader', //具体loader的名称
  type: 'javascript/auto',
  exclude: /node_modules/
}

9.升级happypack插件（happypack可以进行多线程加速打包）

运行在node.js之上的webpack时单线程模型，也就是只能一个一个文件进行处理，不能并行处理，happypack可以将任务分解给多个子进程，最后将结果发给主进程，js是单线程模型，只能通过这种多线程的方式提高性能 vue-loader 不支持 HappyPack，官方建议用 thread-loader

const HappyPack = require('happypack');

exports.module = {
  rules: [
    {
      test: /.js$/,
      use: ['happypack/loader?id=babel'],// 将对.js文件的处理转交给id为babel的HappyPack的实列
      exclude:/node_modules/
    }
  ]
};

exports.plugins = [
  new HappyPack({
    id: 'babel',// 用唯一的标识符id来代表当前的HappyPack 处理一类特定的文件
    loaders: [ 'babel-loader' ] // 如何处理.js文件，用法和Loader配置是一样的
  })
];

标签：exports,webpack4,webpack3,plugin,babel,区别,loader,true,css
来源： https://www.cnblogs.com/zxrbky/p/16616352.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

webpack3和webpack4区别