初识 webpack (一)

初识 webpack (一)

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

基于 webpack 4

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

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

2. 基础用法

webpack 简要

  • 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 去处理不支持的类型.

webpack 简要

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 文件的优化, 资源管理和环境变量注入. 作用于整个构建过程.

webpack 简要

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

webpack 简要

本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!