Webpack基础

五个核心概念

1 Entry: 入口,指示webpack以哪个入口文件为起点开始打包, 分析构建内部依赖图
2 Output: 输出,指示webpack打包后的资源bundles输出到哪个目录以及如何命名
3 Loader: 匹配各种类型文件, 设置如何处理文件
4 Plugins: 插件, 可以用于执行范围更广的任务, 插件的范围包括从打包到优化和压缩,一直到重新定义环境中的变量等.
5 Model: 模式 指示webpack 使用相应的模式的配置(development, production)

运行指令

webpack ./src/index.js -o ./build/build.js --model=development // 开发环境
webpack ./src/index.js -o ./build/build.js --model=production  // 生产环境
// ./src/index.js 打包入口
// -o 指定输出目录 为 ./build/build.js 
// --model 指定开发环境
// 生产环境比开发环境多了个代码压缩

配置文件

webpack.config.js
运行webpack时会加载此文件中的配置
所有构建工具基于NodeJs平台进行, 模块化默认采用commonJs

const { resolve } = require('path')  // resolve 用来拼接绝对路径的方法
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = { // 暴露出一个对象
  entry: './src/index.js',
  output: {
    filename: 'build.js',
    path: resolve(__dirname, 'build')  // __dirname nodejs 的变量, 代表当前目录的绝对路径
  },
  // loader 配置
  module: {
    rules: [
      // 详细loader配置
      {
        // 匹配文件 正则
        test: /\.css$/,
        // 使用哪些loader处理
        use: [
          // 从下到上,从右到左执行
          'style-loader',
          'css-loader'
        ]
      },
      {
        // 匹配文件 正则
        test: /\.less$/,
        // 使用哪些loader处理
        use: [
          // 从下到上,从右到左执行
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        // 匹配文件 正则
        test: /\.(jpg|png|gif)$/,
        // 使用哪些loader处理
        // 依赖 url-loader file-loader
        loader: 'url-loader',
        options: {
          // 如果图片小于8kb 转换为base64
          limit: 8 * 1024,
          // url-loader 默认使用es模块化解析, 而html-loader引入图片是commonjs
          // 使用html-loader处理html图片引入时会出错[Object Module]
          // 解决 关闭url-loader es6的模块化 使用commonjs解析
          esModule: false,
          // 图片名称 [hash: 10] 去hash的前10位 [ext] 原来的扩展名
          name: '[hash:10].[ext]',
          outputPath: 'images'
        },
        {
          test: /\.html$/,
          // 处理html引入图片
          use: 'html-loader'
        },
        {
          // 排除文件
          exclude: /\.(html|js|css)$/,
          // 处理html引入图片
          loader: 'file-loader'
        }
      }
    ]
  },
  // plugin 配置
  plugins: [
    // html-webpack-plugin
    // 功能: 默认创建一个空的html文件, 自动引入打包的所有资源(JS/CSS)
    HtmlWebpackPlugin({
      // 根据一个模板生成文件
      template: './src/index.html'
    })
  ]
  // 模式
  mode: 'development'  // 开发模式
  // mode: 'development'
  // dev-serve 开发服务器 devServer: 用来自动化 (自动编译, 打包, 打开浏览器,自动刷新浏览器)
  // 启动指令 npx webpack-dev-server
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    // 启动Gzip压缩
    compress: true,
    // 端口号
    port: 3000,
    // 自动打开浏览器
    open: true
  }
}