初识 webpack (一)

中文文档: https://webpack.docschina.org/concepts/

基于 webpack 4

1. 为什么需要构建工具?

1. 转换 ES6 语法
2. 转换 JSX
3. CSS 前缀补全, 预处理器
4. 压缩混淆
5. 图片压缩
6. ...

2. 基础用法

• webpack 默认使用 webpack.config.js 配置文件. 可以使用 webpack --config xxx.js 指定配置文件.

2.1 几个概念

• bundle: 打包最终生成的文件
• chunk: 每个 chunk 是由多个 module 组成，可以通过代码分割成多个 chunk
• module: webpack 中的模块（js、css、图片等等）

3. webpack 安装

注意: 使用 webpack 之前需要安装 node.js

# 不推荐 全局安装
npm install --save-dev webpack webpack-cli
或
npm i -D webpack webpack-cli

4. webpack 核心概念

4.1 entry(指定打包入口)

1. 单入口: 适合单页应用. entry 的值是 字符串.
2. 多入口: 适合多页应用. entry 的值是 对象.

module.exports = {
  // 多页面应用
  entry: {
    index: './src/js/index.js',
    login: './src/js/login.js'
  },
  ...
  // 单页面应用
  entry: './src/js/index.js',
}

4.2 output(指定打包输出)

指定 打包的输出目录和文件名.

module.exports = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  ...
}

4.3 loaders

webpack 原生值支持 js 和 json 的解析. 通过 loaders 去处理不支持的类型.

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.js$/,
        // 排除 node_modules 文件夹里的 js 文件
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          }
        }
      },
    ]
   }
}

4.4 plugins

插件用于 bundle 文件的优化, 资源管理和环境变量注入. 作用于整个构建过程.

module.exports = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  ...
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ]
}

4.5 mode(模式)

中文文档: https://webpack.docschina.org/concepts/mod...

mode 用来指定当前的构建环境: production development 和 none. 默认值为 production

本作品采用《CC 协议》，转载必须注明作者和本文链接