1. 加载器loader

webpack内核只能识别JS，不能识别其它文件，如：样式、图片、字体、html...，所以需要用到对应的加载器

1.1 css加载器

第一步：安装style-loader和css-loader

npm i style-loader@2.0.0 css-loader@5.0.1 -D

第二步：配置加载器

module: {
    rules: [
        //css加载器
        { test: /\.css$/i, use: ['style-loader', 'css-loader'] }
    ]
},

1.2 less加载器

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展

第一步：安装less-loader加载器

npm i less-loader@7.1.0 less@3.12.2 -D

第二步：配置less加载器

{ test: /\.less$/i, use: ['style-loader', 'css-loader', 'less-loader'] }

1.3 图片加载器

第一步：安装url-loader 和 file-loader

npm i url-loader@4.1.1 file-loader@6.2.0 -D

第二步：配置图片加载器

//图片加载器
{
    test: /\.(jpg|png|gif)$/i,
    loader: 'url-loader',
    options: {
        limit: 8 * 1024, //8Kb以下打包成代码，8Kb以上打包成文件
        name: '[hash:8].[ext]', //设置打包后的文件名
        outputPath: 'imgs', //设置输出文件的路径
        esModule: false, //关闭ES6的模块化
    }
},

1.4 html加载器

第一步：安装html加载器

npm i html-loader@1.3.2 -D
npm i html-webpack-plugin@5.1.0 -D

第二步：配置html加载器

{ test: /\.html$/i, use: ['html-loader'] },

第三步：配置html插件

new HtmlWebpackPlugin({
    template: './src/index.html', //设置html文件的入口
}),

1.5 JS中的图片

JS中的图片需要先require()引入，后使用

let img1 = require('../images/01.jpg');
document.querySelector('#mypic').addEventListener('click', function () {
    this.src = img1;
});

1.6 字体图标加载器

字体图标文件要用到 file-loader 之间已经安装过了，直接使用即可

配置字体图标加载器：

{
    test: /\.(ttf|woff|woff2|eot|svg)$/i,
    loader: 'file-loader',
    options: {
         name: '[hash:16].[ext]',
         outputPath: 'fonts',
         esModule: false,
    }
}

2. 插件plugins

2.1 css提取插件

第一步：安装插件模块

npm i mini-css-extract-plugin@2.4.2 -D

第二步：引入插件

const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //引入css提取插件

第三步：配置插件参数

new MiniCssExtractPlugin({
    filename: 'css/[name].css',
}),

第四步：将css加载器和less加载器中的 style-loader 改成插件自带的加载器

{
    test: /\.css$/i, use: [{
        loader: MiniCssExtractPlugin.loader,
        options: {
            publicPath: '../'
        }
    }, 'css-loader']
},

2.2 压缩css的插件

第一步：安装插件

npm i optimize-css-assets-webpack-plugin@6.0.1 -D
//npm不行，用yarn
yarn add optimize-css-assets-webpack-plugin@6.0.1 -D

第二步：引入配置

new OptimizeCssAssetsWebpackPlugin(),

3. 开发服务器

3.1 使用开发服务器

第一步：安装开发服务器模块

npm i webpack-dev-server@3.11.2 -D
//npm不行，换yarn
yarn add webpack-dev-server@3.11.2 -D

第二步：配置开发服务器参数

devServer: {
    contentBase: __dirname+'/dist', // 启动服务器目录
    compress: true, // 启动gzip
    port: 8080,  // 端口
    open: true, // 自动打开服务
    publicPath: '/', // 静态资源查找路径
    openPage: 'index.html', // 打开的页面
},

3.2 开发环境和生产环境

第一步：安装环境模块

npm i cross-env@7.0.3 -D
//npm不行，换yarn
yarn add cross-env@7.0.3 -D

第二步：修改package.json，根据不同的命令设置不同的环境模式

 "scripts": {
    "build": "cross-env NODE_ENV=production webpack",
    "serve": "cross-env NODE_ENV=development webpack serve"
  },

第三步：修改webpack.config.js的mode选项

mode: process.env.NODE_ENV,