Webpack深度解析：从入门到实战配置-CSDN博客

本文链接：https://blog.csdn.net/jiuge1234/article/details/124839008

1.webpack 简介

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

2.webpack 四个核心概念

2.1Entry 入口(Entry)

指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。2.2 Output

2.2输出(Output)

指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

2.3 Loader

Loader 让 webpack 能够去处理那些非 JavaScript 文件 (webpack 自身只理解 JavaScript)

2.4 Plugins

插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。

3.webpack 的初体验

3.1基本安装

（1）首先我们在vscode中创建一个文件夹（名为webpack-demo），右键在终端打开

（2）初始化 npm： npm init -y

（3）在本地安装webpack：

npm install webpack webpack-cli --save-dev

（4）创建文件：

新建一个src文件夹，src中创建一个index.js文件（入口文件）

console.log('hello webpack')

新建一个dist文件夹（出口文件）

（5）运行指令

webpack ./src/index.js --output-path ./dist --mode=development

注：./src/index.js 是入口文件路径，./dist是新建的出口文件夹路径，--mode=development是打包模式（开发环境模式：--mode=development 生产环境模式：--mode=production）。运行成功dist文件夹下会出现main.js文件，作为打包的出口文件。

4.webpack配置文件：

4.1官方链接：

配置 | webpack 中文网

默认的配置文件名称是webpack.config.js, webpack.config.js是以Common.js规范进行组织的

常用配置项有：mode（模式），entry（入口），output（出口），module（模块配置-不同类型文件的配置-loader配置），plugins（插件），devServer（开发服务器的配置）

4.2具体操作：

（1）按照第三章的操作，新建文件夹（例：名为webpackconfig）→初始化 npm→安装webpack→创建入口文件(index.js)

（2）新建webpack配置文件webpack.config.js：

const { resolve } = require('path')
module.exports = {
    mode: 'development',
    entry: './src/index.js',             
    output: {
        path: resolve(__dirname, 'dist'),
        filename: "main.js"
    },
}

（3）运行指令：webpack

此功能和上章一样，运行成功会出现dist文件夹和main.js文件，作为打包的出口文件。

5.非js文件打包：

webpack 只能编译打包 js 和 json 文件。如果要打包css、img等文件，需要相应的loader

css-loader将css转化为js（将css输出到打包后的js文件中）

style-loader把包含css内容的js代码，挂载到页面的<style>标签中

5.1具体操作：

在第4章的基础上，

（1）创建文件main.css并在入口文件(index.js)中引入：import './main.css'

（2）下载安装 loader 包（css）：

npm i css-loader style-loader -D

注：安装less：npm i less less-loader -D

（3）配置

匹配后缀名：test：/.css$/i

指定加载器：use:['style-loader','css-loader']

注：loader执行顺序：先右后左（先下后上），所以'css-loader'写在后面是为了优先执行，先将css转成js，再将js中的样式挂载到<style>中。

在webpack.config.js：

const { resolve } = require('path')
module.exports = {
    mode: 'development',
    entry: './src/index.js',             
    output: {
        path: resolve(__dirname, 'dist'),
        filename: "main.js"
    },
    module: {
        rules: [
            {
                test: '/\.css$/i',
                use: [
                    'style-loader',
                    'css-loader',
                     // 'less-loader'
                ]
            }
        ]
    }
}

注：上述方法是打包css，如果打包其它文件，操作步骤都一样，更改为对应的文件形式即可

6.将css打包成独立的文件

（1）安装插件

npm install mini-css-extract-plugin -D

（2）在webpack.config.js中引入插件

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

（3）修改配置文件：替换style-loader

use:['MiniCssExtractPlugin.loader','css-loader']

（4）实例化配置插件

Plugins: [

new MiniCssExtractPlugin()

]

（5）执行打包： webpack

注：MiniCssExtractPlugin方法可在npmjs.com中搜索mini-css-extract-plugin 查看

7.添加样式前缀（打包css）

一些新的css样式属性在浏览器上有兼容性问题，所以需要根据不同的浏览器添加样式前缀

main.css

.code {

user-select: none;

}

（1）安装包

npm i -D postcss-loader autoprefixer

（2）配置webpack.config.js

添加 'postcss-loader'：

// webpack配置文件
const { resolve } = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: resolve(__dirname, 'dist'),
        filename: "main.js"
    },
    module: {
        rules: [
            {
                test: '/\.css$/i',
                use: [
                    'MiniCssExtractPlugin.loader',
                    'css-loader',
                    'postcss-loader'
                ]
            },
        ]
    },
    Plugins: [
        new MiniCssExtractPlugin()
    ]
}

（3）新建postcss.config.js

plugins:[require('autoprefixer')]

module.exports={
    'plugins':[
        require('autoprefixer')
    ]
}

（4）配置需要兼容的浏览器

在Package.json中指定browserslist

详情参考：package - npm 搜索browerslist

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

8.格式校验（打包css）

stylelint :css格式校验的工具，详情可查官网：Home | Stylelint

stylelint-config-standard:规则集

stylelint-webpack-plugin:将webpack和格式校验结合，官网：StylelintWebpackPlugin | webpack 中文文档

（1）安装包

npm i stylelint stylelint-config-standard stylelint-webpack-plugin -D

（2）webpack.config.js中引入插件： const StylelintPlugin=require('stylelint-webpack-plugin')

（3）webpack.config.js配置new StylelintPlugin({})

module: { rules: [ 
    { test: '/.css$/i', 
    use: [ 
        'MiniCssExtractPlugin.loader', 
        'css-loader', 
        'postcss-loader' 
        ] }, 
    ] }, 
    Plugins: [ 
        new StylelintPlugin({ 
            //指定需要进行格式校验的文件 
            files:['src/css/*.{css,less,sass,scss}'
            ] 
        ) 
    ]

（4）指定校验规则：在package.json中指定stylelint

"stylelint":{"extends":"stylelint-config-standard"}

（5）执行打包：webpack

9.压缩css

（1）安装：

npm install optimize-css-assets-webpack-plugin -D

（2）webpack.config.js引入：

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

（3）webpack.config.js配置：new OptimizeCssAssetsPlugin()

 Plugins: [
       new StylelintPlugin({
       //指定需要进行格式校验的文件
        files:['src/css/*.{css,less,sass,scss}']
    )
 ]

10.打包html

（1）安装插件：这个插件能生成后台html文件（用于服务区访问），并在html中加载所有的打包资源

npm i -D html-webpack-plugin

（2）webpack.config.js中引入插件

const HtmlWebpackPlugin=require('html-webpack-plugin')

（3）webpack.config.js中添加配置

html-webpack-plugin - npm

Plugins: [
       //html的配置
       new HtmlWebpackPlugin()
]

（4）打包：webpack

11.webpack编译js

编译目的：将ES6+转成ES5，保证JS在低版本浏览器的兼容性

（1）安装：npm install babel-loader @babel/core @babel/preset-env -D

（2）配置： babel-loader - npm

webpack5