文章注重过程描述,不具备技术深度。

系列文章地址:

一、webpack 基本配置

文章中使用的 webpack 均为 webpack4.x

推荐的 webpack 中文文档地址:https://webpack.docschina.org/loaders/postcss-loader/

webpack 可以通过命令指定输入和输出对象:

webpack main.js -o bundle.js

这种使用方式非常的局限,因此 webpack 提供了默认支持的 webpack.config.js 来进行复杂的配置,webpack.config.js 只是默认名称,可以通过 webpack --config webpack.config.dev.js 脚本配置执行配置文件的名称。

首先在 package.json 中写了一个 scripts:

"dev": "webpack --config ./webpack.dev.config.js",

1、mode 模式

webpack4 支持 mode 模式,因此可以通过配置 mode 去做一些区分处理, mode 可以直接写在配置文件中,也可以通过 webpack --mode=production 来指定。

mode 可以取的值包括:

  • production
  • development
  • node

2、entry 入口

entry 是 webpack 的入口,也就是 __webpack_require__.s='main.js' 的起始文件

单入口,配置一个字符串:

entry: './src/main.js',

单入口, 对象配置:

entry: {
    main: './src/main.js'
}

如果是多页面的项目,会需要多个依赖,因此就会需要多个 entry。

3、output 输出

outputpath 值只能是绝对路径,因此一般使用 path.resolve() 解析相对路径成绝对路径

其中 path 是输出的文件目录,必须是绝对路径,而 filename 则是输出的文件名。

  output: {
    path: path.resolve('./dist/'),
    filename: './build.js'
  },

如果是多个入口文件,必然需要对应多个 bundle 输出,因此可以使用在 entry 中配置的对象的 key 作为 filename 的值,即使是单个文件也可以,只要是 entry 使用的是对象的配置方式。

  entry: {
    'main': './src/main.js'
  },
  output: {
    path: path.resolve('./dist/'),
    filename: '[name].bundle.js'
  },

比如上面的入口配置的是 main,而输出的 filename 配置的是 [name].bundle.js,打包结果是:

1.jpg

4、观察模式

为了避免每次都去执行一遍 yarn dev 命令,配置 watch 为 true 能够监听文件变化,由 webpack 自动执行编译。

watch: true

二、 css 或者 less 支持

webpack 默认就是打包 js 的,如果要打包 css 或者 less,则需要通过 loader 去支持。

注意 webpack 4.x 的配置和之前版本也不太一样,loader 的配置如下面形式:

module: {
    rules: [
        { test: /\.$/, use:[]}
    ]
}

css 的支持:

  {
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
  },

less 的支持:

  {
    test: /\.less$/,
    use: ['style-loader','css-loader','less-loader']
  },

三、图片打包支持

以前基本会用 url-loader 但是这个东西打包完的图片太大了,完全没必要,尤其当图片是放在 cdn 上的时候。

因此现在我只用 file-loader 去打包图片。

file-loader 可以配置的东西很多,常用的基本就是 nameoutputPathpublicPath 这三个属性。

更多属性见:https://webpack.docschina.org/loaders/file-loader/

{
  test: /\.(png|jpg|gif|svg|webp|jpeg)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name]-[hash].[ext]',
        outputPath: 'images/',
        publicPath: 'dist/images/',
      }
    }
  ]
},

这个配置中,options 里面的属性配置说明:

name: '[name]-[hash].[ext]'

配置图片打包出来的文件名称是什么,其中 支持的变量如下

2.jpg

outputPath: 'images/',

文件打包的路径,也是最终输出的路径,这个路径可以使用相对路径,并且相对路径是相对于 output 配置的路径。

比如 output 配置的是 dist/, 而 outputPath 配置的是 images/,最终打包的图片路径是 dist/images/xxx.jpg

publicPath: 'dist/images/',

publicPath 实际上是 html 中访问图片的地址前缀outputPath 是输出的实际地址,而 publicPath 则专门为 html 服务。

比如打包出来的地址是 'dist/images/xxx.jpg',而 index.html 与 dist 是同级目录,因此在 html 访问的时候,肯定是通过 src="./dist/images/....jpg" 使用的。

四、最终的配置文件:

const path = require('path');

module.exports = {
  mode: 'development',
  watch: true,
  entry: {
    'main': './src/main.js'
  },
  output: {
    path: path.resolve('./dist/'),
    filename: '[name].bundle.js'
  },
  module: {
    rules: [{
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.(png|jpg|gif|svg|webp|jpeg)$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name]-[hash].[ext]',
            outputPath: 'images/',
            publicPath: 'dist/images/',
          }
        }]
      },
    ]
  }
}

五、demo

这篇文章的demo github 地址: