Webpack5 第二节

Webpack配置文件

在上面我们使用了npx webpack ./src/index.js -o ./dist --mode=development进行对项目的打包，但是这是否太长了。这时候我们就需要简化我们的命令行的选项，就使用到了我们的webpack配置文件。

首先我们要创建webpack.config.js

复制代码

const {resolve} = require('path')
module.exports ={
    //打包环境配置
    mode: 'development',
    //入口文件
    entry: './src/index.js',
    //输出文件
    output: {
        path: resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
}

然后执行以下命令即可快速打包

复制代码

npx webpack

同时我们还可以在package.json里面添加脚本执行快速打包

添加这个命令之后，可以使用以下命令进行打包

复制代码

npm run build

自动生成HTML文件和指定模版

生成一个html模版，并添加以下内容，在浏览器上打开可以看见输出结构

那我们该怎么自动生成html文件，这时候就需要用到html-webpack-plugin插件。该插件可以生成一个html文件，并在html中加载所有打包资源，便于服务器访问。

安装插件：

复制代码

cnpm i html-webpack-plugin -D

在webpack.config.js里面的插件中添加html打包插件

复制代码

    //插件配置
    plugins: [
        new HtmlWebpackPlugin()
    ],

最后执行npm run build 发现出现了html的打包文件

指定生成html模板

复制代码

//插件配置
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html', 
            filename: 'index.html',
            title: 'webpack-demo'
        })
    ],

但是我们发现其打包的html中的title标签并没有发送改变，如果需要其title标签发送更改的话需要使用EJS语法（也就是js的模版引擎）

复制代码

<title><%=htmlWebpackPlugin.options.title%></title>

打包多个HTML页面和压缩

在html标签中编写以下内容，进行跳转设置

复制代码

<body>
  <div>小滴课堂</div>
  <a href="index.html">首页</a>
  <a href="mine.html">我的</a>
</body>

在webpack.config.js中添加这个内容

复制代码

//插件配置
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html', 
            filename: 'index.html',
            title: '首页'
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html', 
            filename: 'mine.html',
            title: '我的'
        })
    ],

然后执行打包命令。

压缩

复制代码

plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html', 
    filename: 'index.html',
    title: '首页',
    minify: { 
      //压缩html
      collapseWhitespace: true,   //去掉空格
      removeComments: true,       //去掉注释
      removeAttributeQuotes: true //去掉属性引号
    }
  }),
  new HtmlWebpackPlugin({
    template: './src/index.html', 
    filename: 'mine.html',
    title: '我的',
  })
],

CSS打包原理

css-loader，可以将css代码转为js代码，并合并到打包的js文件中

style-loader，可以将包含css内容的js代码，插入到html中style标签中

安装插件

复制代码

cnpm i css-loader style-loader -D

配置打包插件

复制代码

// 模块配置
module: {
  rules: [
    // 配置多个模块规则（配置loader、解析器等选项）
    {
      // 匹配css文件
      test: /\.css$/i,
      // 指定加载器，加载顺序是从左到右或者是从下到上
      use: ['style-loader', 'css-loader'],
    },
  ],
},

CSS代码抽离成单独文件

当我们运行时候有没有相关这个问题，如果我们的css过大是不是也会减少我们项目的运行速度，这时候就需要用到mini-css-extract-plugin，其可以将js文件中抽离出来css代码，减少js文件的体积；并且当js文件比较大的时候，可以避免阻碍页面的渲染，提升渲染速度。

安装插件

复制代码

cnpm i mini-css-extract-plugin -D

配置插件

复制代码

//引入
const MiniCssExtractPlugin=require('mini-css-extract-plugin')

//loader配置（替换style-loader）
use:[MiniCssExtractPlugin.loader,'css-loader']

//实例化插件
new MiniCssExtractPlugin({
  filename:'./css/main.css'
})

打包CSS预编译语言

css预编译语言主要有三个

less

cnpm install less less-loader -D
sass

cnpm install node-sass sass-loader -D
stylus

cnpm install stylus stylus-loader -D

这次我们主要是进行less进行演示：

首先我们需要在index.js文件中引入该模块

首先在webpack配置文件中配置规则

复制代码

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

我们需要创建一个main.less文件

复制代码

@color:red;

html,body{
    background: @color;
}

然后更改入口文件index.js

复制代码

import './css/main.less'

对特殊CSS样式添加前缀

对于不同的浏览器有不一样的规则，所以为了兼容各个浏览器，我们需要安装一些插件方便我们在不同的浏览器上进行运行。

安装插件

复制代码

cnpm i postcss-loader autoprefixer -D

配置插件，在文件的根目录下创建一个postcss.config.js文件

复制代码

use: [
  MiniCssExtractPlugin.loader, 
  'css-loader',
  'postcss-loader'   // 处理css兼容
]

在package.json添加以下内容

复制代码

  "browserslist":[
    "last 2 version",   
    "> 1%"              
  ],

打包后出现这样的结果，加上了浏览器前缀

CSS压缩

安装插件

复制代码

cnpm i optimize-css-assets-webpack-plugin -D

在webpack.config.js中插件配置

复制代码

// 引入
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')

//配置
plugins: [
  new OptimizeCssAssetsPlugin(),
],