Webpack中的加载器、插件及开发环境配置详解

Webpack加载器loader

什么是加载器loader?

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

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'] }
    ]
},

less加载器

什么是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'] }

图片加载器

第一步: 安装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的模块化
    }
},

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文件的入口
}),

JS中的图片

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

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

字体图标加载器

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

配置字体图标加载器：

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

插件plugins

什么是webpack插件?

Webpack插件是一种能够在Webpack编译过程中对模块进行处理的扩展工具，可以实现如文件压缩、代码优化、资源管理等功能。插件以插件实例的形式引入Webpack，在Webpack执行过程中调用。

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']
},

压缩css的插件

第一步：安装插件

npm i optimize-css-assets-webpack-plugin@6.0.1 -D
或
yarn add optimize-css-assets-webpack-plugin@6.0.1 -D

第二步：引入配置

new OptimizeCssAssetsWebpackPlugin(),

开发服务器

使用开发服务器

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

npm i webpack-dev-server@3.11.2 -D
或
yarn add webpack-dev-server@3.11.2 -D

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

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

开发环境和生产环境

第一步：安装环境模块

npm i cross-env@7.0.3 -D
或
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,