这篇介绍《webpack开发环境配置》（下）。（demo代码github地址）

知识点包括：

• 打包其他资源
• devServer
• 开发环境配置。

阿里矢量图标库下载一些图标。

2、下载后解压，里边有这些东西。

demo_index是使用说明

3、然后我们将iconfont.css等文件放到工程文件夹下。

我们需要对css文件、html文件、js文件、ttf文件进行打包。

4、那么在webpack.config.js配置文件中写代码。

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资源以外的资源)
            {
                exclude: /\.(css|js|html)$/,
                loader: 'file-loader',
                options: {
                    //解决:关闭url-loader的es6模块化，使用commonjs解析
                    esModule: false,
                },
                type:'javascript/auto'
            }
        ]
    },
    plugins: [
        new HtmlwebpackPlugin(
            {
                template: './src/index.html'
            }
        )
    ],
    mode: 'development'
}

index.js代码：

// 引入icon-font样式文件
import './iconfont.css'

index.html

    
    
    
    


    
    
    


　　

5、然后在终端中依次输入：　　

npm init
webpack_img
npm i webpack webpack-cli -D
npm i html-webpack-plugin -D
npm i less less-loader css-loader style-loader -D
npm i url-loader file-loader -D
npm i html-loader -D

然后工程文件目录如下： 

 6、在package.json中的scripts修改代码。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },

7、然后终端输入命令：npm run dev生成的文件如下　　

随后打开新生成的html文件。效果如下

阿里矢量图库）。　　

 3、终端依次输入以下指令进行安装包

npm init
webpack_kaifa
npm i webpack webpack-cli -D
npm i html-webpack-plugin -D
npm i less less-loader css-loader style-loader -D
npm i url-loader file-loader -D
npm i html-loader -D
npm i webpack-dev-server -D

4、随后在package.json中修改scripts段代码

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },

5、随后终端输入npm run dev即可打包，此次打包是综合性的打包，包含了图片，html，样式，字体矢量图标等等。　

---

注：笔记转载自疯子的梦想@博客，课程来自尚硅谷b站Webpack5实战课程