webpack 简介

webpack 是前端开发必备的工具，由 node.js 编写，主要用来打包和输出静态资源，
它将各种文件视为模块，根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

webpack 基本配置

webpack有五大基本配置:

entry

指定打包文件的入口（ index.js ）

output

指定打包输出的文件位置

loader

加载器，webpack自身只能处理 js ，加载其他资源例如样式文件，图片资源等需要配置相应的 loader

plugin

用来拓展webpack的功能，例如打包优化和压缩，定义环境中的变量等。

mode

模式，指定开发模式（development）和生产模式（production），开发模式打包的代码没有压缩，便于调试

简单实例

本实例要求可以处理css，less，图片资源，字体资源
代码： webpack-study/webpack-demo1

开发依赖

开发依赖见 package.json 的 devDependencies

"devDependencies": {
    "css-loader": "^5.1.0",
     "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.2.0",
  "html-withimg-loader": "^0.1.16",
  "less": "^4.1.1",
  "less-loader": "^8.0.0",
  "style-loader": "^2.0.0",
  "url-loader": "^4.1.1",
  "webpack": "^5.24.1",
  "webpack-cli": "^4.5.0",
  "webpack-dev-server": "^3.11.2"
}

配置文件

webpack 的配置文件 webpack.config.js
打包运行命令: npx webpack

// path 为node自带的模块，resolve用来拼接路径
const {resolve} = require('path') 
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build'), // path 为拼接的绝对路径
    // __dirname 表示当前文件（webpack.config.js）的绝对路径
  },
  module:{
    rules: [
      // loader 配置,loader 倒序执行
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
        // css-loader: 加载css,将css文件变成commonjs模块加载到js中，里面内容是样式字符串
        // style-loader:创建style标签，将js中的样式资源插入进去，添加到head中生效
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
        // less-loader: 将less文件编译成css文件，需要下载less-loader和less
      },
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'url-loader',
        // 只能处理非html中的图片资源，例如
        //  1. css background中的 url
        //    2. js 中 import * as url from './a.jpg' 
        //  3. js 中 const url = require('./a.jpg')
        // url-loader会调用file-loader，所以需要下载file-loader
        options:{
          name: '[hash:10].[ext]',
          limit: 3 * 1024,
          // 图片超过 3kb 使用base64 加载，可以减少请求
          esModule: false,
          // url-loader默认使用es6模块加载，false关闭es6使用commonjs
          outputPath: 'imgs' // 图片资源输出路径
        }
      },
      {
        test: /\.html$/,
        loader: 'html-withimg-loader',
        // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
        // url-loader esModule:false 保证用commonjs解析
      },
      {
        exclude: /\.(html|js|css|less|jpg|png|gif)/,
        // 上述文件类型以外，例如字体文件
        loader: 'file-loader',
        options:{
          name: '[hash:10].[ext]',
          outputPath: 'media'
        }
      }
    ]
  },
  mode: 'development',
  plugins:[
    new HtmlWebpackPlugin({
      template: './src/index.html'
      // 根据template指定的html文件，将打包后的js引入
    })
  ],
  devServer: { // 方便开发的服务器，主要是用来自动化(自动编译，自动打开，刷新浏览器)
    // 返回 build 之后的代码，不输出代码，只在内存中编译打包
    // 需要安装依赖 webpack-dev-server, 
    // webpack-cli ^4 以上启动命令 npx webpack serve 
    contentBase: resolve(__dirname, 'build'),
    compress: true,// gzip 压缩
    port: 3000,
    open: true, // 自动打开浏览器
  }
}