配置文件

在 webpack 中，我们一般使用 webpack.config.js 来定义 webpack的配置，有时候我们为了区分不同的环境，我们会以不同的文件名来区分，一般会分为三个文件：

• webpack.common.config.js
• webpack.dev.config.js
• webpack.prod.config.js

这三个文件中，我们通常会把 公共的配置内容放在 webpack.common.config.js 中，而把生产专用的打包配置放在 webpack.prod.config.js 中，把开发使用的打包配置放在 webpakc.dev.config.js 中。在 webpack.prod.config.js 文件和 webpack.dev.config.js 中，我们会使用 webpack-merge 插件把 webpack.common.config.js 文件中的配置合并到最终的打包配置中。

在 webpack 的配置文件中，我们通常会导出一个 webpack 的配置对象，但除此之外，我们使用其它的方式。

使用 TypeScript配置Webpack

安装依赖

npm i -D typescript ts-node @types/node @types/webpack
npm i -D @types/webpack-dev-server

文件配置

新建 webpack.config.ts 文件:

import path from 'path';
import webpack from 'webpack';
import 'webpack-dev-server';
const config: webpack.Configuartion = {
    mode: 'production',
  entry: './foo.js',
  output: {
      path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

导出数组

我们还可以导出一个 webpack 的配置对象组成的一个数组，来配置一个打包的集合。

导出一个函数

当我们需要在同一个配置文件中，根据不同的环境变量来使用不同的打包配置的时候，我们就可以以函数的形式导出 webpack 的打包配置。形式如下：

module.exports = function (env,args){
    return {}
}

函数中接收的 env 来自于 webpack 执行中传递的参数。如下：
webpack --env prod :

{
  WEBPACK_BUNDLE: true,
  WEBPACK_BUILD: true,
    prod: true
}

webpack --env name=test :

{
  WEBPACK_BUNDLE: true,
  WEBPACK_BUILD: true,
    name: 'test'
}

webpack --env app.name="user" :

{
  WEBPACK_BUNDLE: true,
  WEBPACK_BUILD: true,
  app: {
      name: "user"
  }
}

导出为Promise

当我们的配置内容有一部分来自于异步的时候，我们可以在webpack的配置文件中返回一个 Promise 的方式来
配置 webpack，比如，我们的配置读取自文件或我们自己搭建的网络。配置形式如下：

module.exports = ()=>{
    return new Promise((resolve, reject) => {
      setTimeout( () => {
        resolve({
          mode: "production"
      })
    }, 5000)
  } )
}

基本配置

在 webpack中，常用的一级配置有这么几个字段:

• mode
• module
• entry
• output
• plugins
• devtool
• devServer

• resolve

  mode

  在 webpack 中，有三种 mode:

• production

• development
• none

其中的 production 和 development 分别预设了生产环境和开发环境的通用配置，而 none 则表示为不使用任何的预设。
当我们在webpack的配置中没有使用任何值的时候，webpack会默认使用 production 配置。webpack查找 mode 的作用为：

webpack文件配置>process.env.NODE_ENV>默认的’production’

常用插件

HtmlWebpackPlugin

安装

npm i -D html-webpack-plugin

常用Loader

ts-loader

安装

npm i -D ts-loader

配置

module.exports = {
    ...
  resolve: {
      extensions: [".ts",".tsx",".js"],
  },
  devtools: "inline-source-map",
  module: {
      rules: [
        {
          test: /\.tsx?$/,
        loader: "ts-loader"
      }
    ]
  }
  ...
}

webpack-dev-server

要在webpack中使用webpack-dev-server开发，要安装相关的依赖—webpack-dev-server,如果使用的是 typescript的配置文件，还需要安装 @types/webpack-dev-server：

npm i -D webpack-dev-server
npm i -D @types/webpack-dev-server // 可选安装，当配置文件使用的是 typescript语言的时候，需要安装这个。

在安装了webpack-dev-server之后，我们要修改启动webpack的方式，由npx webpack修改为npx webpack serve。

配置

webpack-dev-server常用到的配置有：

devServer: {
  contentBase: './dist',
  hot: true,
  historyApiFallback: true,
  noInfo: true,
}