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

刺骨的言语ヽ痛彻心扉 2023-01-23 04:52 332阅读 0赞

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

项目内容上传到了  码云 [https://gitee.com/a2547944268/webpack\_test][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.打包其他资源 ###

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

可以看到在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,
      },
    };

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

[https_gitee.com_a2547944268_webpack_test]: https://gitee.com/a2547944268/webpack_test