基础篇（一）：初识webpack的配置（手动搭脚手架、html-webpack-plugin、webpack-dev-server等）

一.开发前准备

1.新建一个webpack-app文件夹，生成package.json文件

npm init -y

2.安装webpack

注意：建议安装webpack到当前项目，不要在全局，避免和小伙伴webpack版本不一致

npm install webpack webpack-cli --save-dev

// 检测版本
webpack -v

3.创建src文件夹、index.html及webpack.config.js文件

如图目录结构

二.自定义webpack配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development', // 环境
  entry: './src/index.js',

  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
    clean: true, // 每次打包清理dist的文件
    assetModuleFilename: 'images/[contenthash][ext]' // 图片在dist打包里位置，优先级小于rules的generator
  },

  devtool: 'inline-source-map', // 浏览器console原来的位置

  module: {
    rules: [
      {
        test: /\.png$/,
        type: 'asset/resource', // 发送一个单独的文件并导出URL。之前通过使用 file-loader 实现
        generator: {
          filename: 'images/[contenthash][ext]'
        }
      },
      {
        text: /\.svg$/,
        type: 'asset/inline' // 导出一个资源的 data URI（base64）。之前通过使用 url-loader 实现
      },
      {
        text: /\.txt$/,
        type: 'asset/source' // 导出资源的源代码。之前通过使用 raw-loader 实现
      },
      {
        text: /\.jpg$/,
        type: 'asset', // 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现
        parser: { // 解析器
          dataUrlCondition: {
            maxSize: 4 * 1024 * 1024 // 大于4M，dist生成资源文件，否则base64格式
          }
        }
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html', // 打包前文件名
      filename: 'app.html', // 打包后文件名
      inject: 'body'  // 打包后js引入位置
    })
  ],

  devServer: { // 热更新
    static: './dist',
    port: 8090,
    // open: true // 浏览器自动打开
  }
}

1.html-webpack-plugin自动引入资源

上面我们手动写了index.html加载dist/bundle.js，那如何自动生成app.html并引入打包资源呢？让该插件为我们生成一个 HTML 文件

npm install html-webpack-plugin -D

然后new实例化配置

2.清理dist

我们执行webpack后发现我们之前生成的一些文件还在，但事实上我们并不需要他们了，那我们该怎么在生成新的dist前清除掉旧的打包资源呢

在output中配置clean: true即可

3.mode环境

通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

4.source map

source map能帮助我们在浏览器中调试时看到源码，以帮助我们精准的定位问题代码位置

配置devtool: 'inline-source-map’即可开启

5.watch mode

watch监听文件变化，当它们修改后会重新编译

webpack --watch

或

module.exports = {
  // ...
  watch: true,
};

6.webpack-dev-server

watch的唯一的缺点是，为了看到修改后的实际效果，我们需要刷新浏览器。我们使用这个插件实现热更新

npm install webpack-dev-server -D

配置devServer，看上面代码

module配置看下一篇