webpack4以上版本

1.mode属性：

webpack需要设置mode属性用来指明是开发环境还是生产环境，可以是development或production，例如: webpack --mode development

webpack针对开发模式提供的特性: 浏览器调试工具、注释、开发阶段的详细错误日志和提示、快速和优化的增量构建机制

webpack针对生产模式提供的特性:开启所有的优化代码、更小的bundle大小、去除掉只在开发阶段运行的代码. Scope hoisting（将多个bunnd.js放到同一闭包里面，加快代码运行速度）和Tree-shaking（进入未使用的模块给它去掉，减小整个bunnd.js的大小）

2.插件和优化：

webpack4删除了CommonsChunkPlugin插件，它使用内置API optimization.splitChunks和optimization.runtimeChunk，这意味着webpack会默认为你生成共享的代码块。

其他插件的变化:

NoEmitOnErrorsPlugin废弃–>使用optimization.noEmitOnErrors替代

ModuleConcatenationPlugin 废弃–>使用optimization.concatenateModules替代

NamedModulesPlugin 废弃–>使用optimization.namedModules替代

uglifyjs-webpack-plugin升级到了v1.0版本

3.开箱即用WebAssembly：

WebAssembly(wasm，汇编，允许在web上执行二进制，对js性能的补充。)会带来运行时性能的大幅度提升，由于在社区的热度，webpack4对它做了开箱即用的支持。你可以直接对本地的wasm模块进行import或者export操作，也可以通过编写loaders来直接import C++、C或者Rust。

4.支持多种模块类型共五种:

javascript/auto: 在webpack3里，默认开启对所有模块系统的支持，包括CommonJS、AMD、ESM。

javascript/esm:只支持ESM这种静态模块

javascript/dynamic:只支持CommonJS和AMD这种动态模块

json:只支持JSON数据，可以通过require和import来使用

webassembly/experimental:只支持wasm模块，目前处于试验阶段

5.OCJS

0CJS的含义是0配置，webpack4受Parcel打包工具启发，尽可能的让开发者运行项目的成本变低。为了做到0配置，webpack4不再强制需要webpack.config.js 作为打包的入口配置文件了，它默认的入口为’./src/‘和默认出口’./dist’，对小项目而言是福音。

6.新的插件系统

webpack4对插件系统进行了不少修改，提供了针对插件和钩子的新APl。变化如下:

所有的hook由hooks对象统一管理，它将所有的hook作为可扩展的类属性。·

当添加插件时，必须提供一个插件名称。

开发插件时，可以选择sync/callback/promise作为插件类型。

可以通过this.hooks = { myHook: new SyncHook(…)}来注册hook了。

注意:当使用webpack4时，确保使用Node.js的版本>=8.9.4。因为webpack4使用了很多JS新的语法，它们在新版本的v8里经过了优化。

7.安装webpack

npm install webpack webpack-cli -g
// -g这里表示全局安装，也可以在自己项目中安装，将-g去掉，每个项目配置自己独有的打包模块，推荐全局安装，以节省自己内存空间，不过别人下载你的项目后需要知道webpack版本号，否则可能会报版本问题的bug

8.webpack基本使用：

webpack最基本的使用就是一个输入文件一个输出文件，在项目中输入文件一般是main.js,输出文件是webpack打包后的文件，这个文件名通常在webpack配置文件中配置好就行，当然也可以通过webpack打包输出文件，其命令：webpack main.js -o bundle.js ,其中-o表示输出，后面的是文件名,不过通常情况下这些配置都是配置在配置文件中的，这样我们只需要简单的命令即可完成打包，如：

webpack.config.js基本配置：

// 1.引入path包,webpack5中输出文件要求绝对路径，因此这需要引入path模块
const path = require('path')
module.exports = {
  // 2.打包入口文件
  entry: './src/main.js',
  // 3.打包输出文件
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  // 4.开发环境下，建议打开该选项
  devtool: 'eval-source-map',
} 

package.json配置打包命令（webpack4以上强制要求指明打包环境，因此后面需要–环境）：

// 生产环境 
"build": "webpack --mode=production"
// 开发环境
"dev": "webpack --mode=development"
// 热更新启动项目
"server": "webpack-dev-server"

提示： 有的时候会有多个入口文件，此时可以配置多个入口文件，输出文件则要配置成灵活的，如：

module.exports = {
  // 入口文件可以配置多个，此时可以打包出多个打包文件
  entry: {
    main: './src/main.js',
    utils: './src/utils.js'
  },
  // 多个打包文件命名需要写成动态命名，name实际是入口配置中对象的key
  output: { 
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js'
  }
}

loaders:

loaders是将TypeScript、Less、Sass、files、JSON、Transpiling(将其他各种语言转换为js)等语言处理成前端可认识的工具，loaders是一类工具，使用某个工具时需要先npm下载

url-loader: 当文件的大小小于某个值时，将文件转换为base64的格式，一般代替精灵图（小图标推荐base64格式，减少请求，因为base64位图片是以代码的形式直接写在文件中）

babel-loader:将es6-es7等高级语法代码转换为es5，它需要用到@babel/preset-env、@babel/plugin-proposal-object-rest-spread 等组件，使用时也要下载，@babel/plugin-transform-react-jsx:处理react的组件：npm i @babel/plugin-transform-react-jsx -D ，-D表示开发环境才会用到

插件：

一类打包对代码处理的工具，下面介绍几个常用插件：

mini-css-extract-plugin: webpack默认将转换后的css代码是放到js文件的，这样会导致js文件很臃肿，那么可以使用mini-css-extract-plugin将css代码抽离成为css代码文件，此模块需要单独下载。

DefinePlugin: 用来做定义的，定义一些ip等，如生产环境ip和开发环境ip的定义等，此插件从webpack模块解构出来即可。

html-webpack-plugin:用来生成html文件的插件，此插件需要安装

devServer: 热替换，在代码被修改后会自动热更新到浏览器，无需重新刷新浏览器，此插件需要单独安装，npm i webpack-dev-server -g ,注意是webpack-dev-server这个包

webpack.config.js 配置文件：

// 7-1: 引入mini-css-extract-plugin插件：
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 7-2: 解构定义配置插件：
const { DefinePlugin } = require('webpack')
// 7-3: 引入生成html文件的插件：
const htmlWebpackPlugin = require('html-webpack-plugin');
// 1.引入path包,webpack5中输出文件要求绝对路径，因此这需要引入path模块
const path = require('path')
module.exports = {
  // 2.打包入口文件
  entry: './src/main.js',
  // 3.打包输出文件
  output: { 
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  // 4.开发环境下，建议打开该选项
  // devtool: 'eval-source-map',
  // 5.配置打包环境：production生产环境、development开发环境，一般在package.json文件中配置命令即可
  mode: 'production',
  // 6.配置loader:
  module: {
    rules: [
      // A.将图片文件处理为base64位文件：npm i url-loader -S ,将url-loader先安装到本地，-S表示同时需要记录在package.json中
      // 此时去打包提示需要安装file-loader,原因是图片属于文件类型，因此还需要file-loader,继续npm i file-loader -S安装，后面其它loader安装方式一样，我就不重复了
      {
        test: /\.(jpg|svg|png|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 默认为true，即使用es6模块化；设为false，即使用commonJs模块语法
              esModule: false,
              outputPath: 'images',
              limit: 100*1024, // 小于100kb的图片转为base64
              name: '[hash].[ext][query]', // 自定义输出文件名
              // webpack5使用旧的assets loader（如file-loader/url-loader）
              // 可以加'javascript/auto'来解决图片无法生成images文件夹（目标文件夹）
              type: 'javascript/auto'
            }
          }
        ]
      },
      // B.处理js、react高级语法：
      {
        test: /\.(m?js|jsx)$/, // 处理js,和react文件
        exclude: /(node_modules|bower-components)/, // 忽略node_modules等文件
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env','@babel/preset-react'], // @babel/preset-env核心对js高级语法解析的工具,@babel/preset-react解析react语法
            plugins: ['@babel/plugin-proposal-object-rest-spread'] // 处理react的工具
          }
        }
      },
      // C.处理sass:
      {
        test: /\.scss$/,
        use: [
          // 以下是未使用MiniCssExtractPlugin插件配置：
          // "style-loader",
          // "css-loader",
          // "sass-loader"

          // 使用MiniCssExtractPlugin插件配置：
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader"
        ]
      }
    ]
  },
  // 7.插件：
  plugins: [
    // 7-1.从js文件抽离css代码到css文件：
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
      chunkFilename: '[id].css',
    }),
    // 7-2.定义配置，如不同环境的ip地址：DefinePlugin需要先从webpack中解构出来
    new DefinePlugin({
      // 这里定义的：SERVICE_URL可以在项目其他文件中使用
      'SERVICE_URL':JSON.stringify('https://blog.csdn.net/weixin_46758988')
    }),
    // 7-3:生成html文件：htmlWebpackPlugin默认可以什么也不配置，如果想要生成自定义html文件，那么就要对其配置：
    new htmlWebpackPlugin({
      title: 'my-app', // 用来设置网站标题
      filename: 'index.html', // 设置文件名，默认就为：index.html
      template: './src/index.html', // 默认html模板，在这个文件可以引入项目所依赖的其他文件
    })
  ],
  // 8.热替换：
  devServer: {
    // contentBase: path.join(__dirname,'dist'), // 启动文件位置,版本问题，开启会报bug
    compress: true, // 是否压缩代码
    port: 9000, // 端口
    // hot: false // 热替换，false表示热替换，true表示不热替换
  },
  // 9.webpack自身配置：
  // configureWebpack: {
  //   // 是否开启代码性能提示：有些文件大小超过webpack默认的配置大小会报警告
  //   performance: {
  //     hints: false, // 关闭,其值还可以是：warning表示警告：
  //     // 入口起点的最大体积
  //     maxEntrypointSize: 50000000,
  //     // 生成文件的最大体积
  //     maxAssetSize: 30000000,
  //     // 只给出 js 文件的性能提示
  //     assetFilter: function(assetFilename) {
  //       return assetFilename.endsWith('.js');
  //     }
  //   },
  // }
}

// module.exports = {
//   // 入口文件可以配置多个，此时可以打包出多个打包文件
//   entry: {
//     main: './src/main.js',
//     utils: './src/utils.js'
//   },
//   // 多个打包文件命名需要写成动态命名，name实际是入口配置中对象的key
//   output: { 
//     path: path.resolve(__dirname, 'dist'),
//     filename: '[name].bundle.js'
//   }
// }

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：[email protected]联系笔者删除。
笔者：苦海