webpack入门2---开发环境配置

在查看内容之前可以先拉下全部项目的代码运行查看：

项目内容上传到了  码云 https://gitee.com/a2547944268/webpack_test上，下面的内容对照着代码的话，可能更清晰。

基础配置

在项目内创建配置文件webpack.config.js

配置内容如下：

const { resolve } = require('path'); // node 内置核心模块，用来处理路径问题。

module.exports = { 
    entry: './src/js/index.js',     // 入口文件 
    output: {                       // 输出配置 
        filename: './built.js',     // 输出文件名 
        path: resolve(__dirname, 'build/js') // 输出文件路径配置 
    },
    mode: 'development' //开发环境 
};

运行指令：webpack

1.打包样式资源

打包样式资源文件，需要的是创建css和less文件

打包样式资源，需要安装loader包

npm i css-loader style-loader less-loader -D

修改配置文件

/*
    webpack.config.js webpack的配置文件
    作用：指示wepack干哪些活（当你运行webpack指令时，会加载里面的配置）
    所有构建工具都是基于nodejs平台运行的，默认采用commonjs（注意和es6module）
    src文件夹内采用的是ES6的方式，而配置文件webpack.config.js内采用的commonjs
*/
// resolve用来拼接绝对路径的方法
const { resolve } = require('path');

module.exports = {
  // webpack配置
  // 入口起点
  entry: './src/index.js',
  // 输出
  output: {
    filename: 'built.js', // 输出文件名
    // __dirname nodejs的变量，代表当前文件的目录绝对路径
    path: resolve(__dirname, 'build'), // 输出路径
  },
  // loader配置
  module: {
    rules: [
      // 详细loader配置
      // 不同文件必须配置不同loader处理
      // 每一个对象的每个loader只能处理一种文件类型
      {
        // 匹配哪些文件
        // 这个是样式打包配置
        test: /\.css$/,
        use: [
          // use数组中的执行顺序：从右到左，从下到上 依次执行
          // 创建style标签，将js的样式资源插入进行，添加到head中生效
          'style-loader',
          // 将css文件变成一个commonjs模块，加载到js中，里面内容是样式字符串
          'css-loader',
        ],
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          // 将css文件编译成css文件
          // 需要下载less和less-loader
          'less-loader',
        ],
      },
    ],
  },
  // plugins的配置
  plugins: [
    // 详细plugins的配置
  ],
  // 模式
  // mode: "development",   // 开发模式
  mode: 'production',
};

可以看到在modules内的rules内使用的loader对css进行处理。

2.打包HTML资源

安装下载plugin包

npm install --save-dev html-webpack-plugin

在安装之后，导入安装的 html-webpack-plugin 插件，然后在webpack内的plugin插件内设置需要打包的插件文件

/*
  loader: 1. 下载   2. 使用（配置loader）
  plugins: 1. 下载  2. 引入  3. 使用
*/
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      // loader的配置
    ],
  },
  plugins: [
    // plugins的配置
    // html-webpack-plugin
    // 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
    // 需求：需要有结构的HTML文件
    new HtmlWebpackPlugin({
      // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
      template: './src/index.html',
    }),
  ],
  mode: 'development',
};

3.打包图片资源

下载安装loader包

npm install --save-dev html-loader url-loader file-loader

修改配置文件

/**
 * 使用url-loader对样式中的html进行处理，url-loader依赖于file-loader
 * 下载：url-loader 和 file-loader
 * 使用html-loader对html中的img标签进行处理
 * 下载：html-loader
 */
const {
  resolve,
} = require('path'); // 使用resolve()处理绝路径
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 打包html文件
module.exports = {
  // 入口文件
  entry: '/src/index.js',
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'build'),
    publicPath: './',
  },
  module: {
    rules: [
      // loader配置
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
      {
        // 问题：默认处理不了html中的img图片
        // 对样式中引入的图片文件进行转译，不处理img标签
        test: /\.(jpg|png|gif)$/,
        // 下载：url-loader file-loader
        loader: 'url-loader',
        options: {
          // 图片小于15kB，会将图片传换成base64编码处理，
          // 目的是为了将小图转为编码减少请求数量减轻服务器压力，
          // 会导致图片体积增大，即base64编码比原图体积大（建议对小于12kB的图做编码处理，大图不处理）
          limit: 15 * 1024,
          // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
          // 关闭es6模块化处理，避免与html-loader的common.js规范冲突，发生冲突会导致路径变成“[object Module]”
          // 新版本已经没有这个问题了 可以不关闭。
          esModule: false,
          // 默认图片命名为chunk的hash值，太长了
          // [hash:10]为hash值前十位，[ext]表示文件原有扩展名
          name: '[hash:10].[ext]',
        },
      },
      {
        // 所有使用的loader都是需要下载的
        test: /\.html$/,
        // 处理html文件内的img图片（负责引入img，从而能被url-loader进行处理）
        loader: 'html-loader',
        options: {
          esModule: false,
        },
      },
    ],
  },
  // 插件配置
  plugins: [
    // HtmlwebpackPlugin默认功能为创建空的html（body为空）并引入打包输出的js文件
    // template配置是将指定的html文件的body内容加入到创建的html文件中
    // html-webpack-plugin版本4 和 webpack5有兼容性问题，报错查看：https://blog.csdn.net/Kindergarten_Sir/article/details/110083041
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  mode: 'development', // 开发环境
};

这里是优先使用了url-loader对css内引入的图片进行了处理，但是默认处理不了html中img的图片，需要使用html-loader将图片引入，然后使用url-loader处理图片。

4.打包其他资源

打包除了样式文件、图片文件之外的其他所有文件，例如字体文件等

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      // 打包其他资源(除了html/js/css资源以外的资源)
      {
        // 排除css/js/html资源
        exclude: /\.(css|js|html|less)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  mode: 'development',
};

可以看到在loader配置内使用file-loader使用 exclude 属性，去除所有其不需要打包的文件，打包其他所有文件。

5.devserver

配置内容

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      // 打包其他资源（除了html/js/css以外的资源）
      {
        // 排除html/js/css
        exclude: /\.(css|js|html|less)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
        },
      },

    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  mode: 'development',

  // 开发服务器  devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
  // 特点：只会在内存中编译打包，不会有任何输出
  // 启动devServer指令为：webpack server (因为是本地安装 采用npx运行)
  // 在使用前优先安装 webpack-dev-server
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    // 启动gzip压缩
    compress: true,
    // 端口
    port: 3000,
    // 自动打开浏览器
    open: true,
  },
};

运行的命令为：webpack server

最后是一个汇总的配置内容

开发环境配置

/*
  开发环境配置：能让代码运行
    运行项目指令：
      webpack 会将打包结果输出出去
      webpack server 只会在内存中编译打包，没有输出
*/

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      // loader的配置
      {
        // 处理less资源
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
      // css文件是放置在js文件内的，不需要单独文件夹存放
      {
        // 处理css资源
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          // 关闭es6模块化
          esModule: false,
          outputPath: 'imgs',
        },
      },
      {
        // 处理html中img资源
        test: /\.html$/,
        loader: 'html-loader',
        options: {
          esModule: true,
        },
      },
      {
        // 处理其他资源
        exclude: /\.(html|js|css|less|jpg|png|gif)/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'media',
        },
      },
    ],
  },
  plugins: [
    // plugins的配置
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true,
  },
};

最后是从对前面的具体每一步的具体汇总。