一起从零开始学VUE（5） 了解一下webpack相关知识

webpack

基本概念

1、定义：webpack是前端项目工程化的具体解决方案

2、主要功能：提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JS的兼容性、性能优化等强大功能

基础

1、新建项目空白目录，并运行 npm init -y命令，初始化包管理配置文件package.json

2、新建src源代码目录

3、新建src->index.html 首页和src->index.js脚本文件

4、初始化首页基本的结构

5、运行 npm install jquery -S 命令，安装jquery

6、通过ES6模块化的方式导入jquery，实现列表隔行变色效果

在项目中安装webpack

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

配置webpack

1、在根目录，创建名为webpack.config.js的webpack配置文件

使用Node.js中的导出语法，向外导出一个webpack的配置对象

module.exports ={
//代表运行模式:development / production   ---->开发的不同阶段
mode:'development'
}

2、在package.json的scripts节点下，新增dev脚本（脚本名字可以随便取)

"scripts":{

	"dev":"webpack"//可以通过npm run 执行

}

3、在终端中运行npm run dev命令，启动webpack进行项目的打包构建

webpack中的默认约定

1、默认的打包入口文件为src->index.js

2、默认的输出文件路径为dist->main.js

可以在webpack.config.js中修改

自定义打包的入口与出口

在配置文件中，通过entry节点指定打包入口，output节点指定打包生成的文件，filename指定生成的文件名。

一些插件

1、webpack-dev-server

• 类似于node.js中的nodemon工具
• 修改源代码后，webpack会自动进行项目的打包和构建

npm install webpack-dev-server@3.11.2 -D

报错

如果出现了下列错误

直接按照后面提示的命令进行操作就可以解决了

配置

①修改package.json->scripts中的dev命令如下：

"scripts":{

	"dev":"webpack serve"

}

②再次运行npm run dev命令，重新进行项目的打包

报错

出现这样的错误是没有安装webpack-cli

执行npm install webpack-cli --save-dev进行安装

成功执行的结果如下

当修改源代码并保存后该插件会自动进行打包

③在浏览器中访问http://localhost:8080，查看打包效果

webpack-dev-server会启动一个实时打包的http服务器

生成的文件存在于根目录不可见，可以通过地址栏访问，这是由于插件将生成的文件存放在内存中

2、html-webpack-plugin

• webpack中的html插件（类似于一个模板引擎插件）
• 通过插件自定制index.html页面的内容

npm install html-webpack-plugin@5.3.2 -D

配置

//导入插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
//实例化
const htmlPlugin = new HtmlPlugin({
    template:"./src/index.html",
    filename:"./index.html",
})
//通过plugin节点使得插件生效
module.exports = {
    mode: "development",
    plugins:[htmlPlugin]
}

该插件将index.html复制到项目根目录和内存中，并在插件生成的index.html页面中，自动注入了打包的bundle.js文件

3、dev-server节点

通过该节点可以对webpack-dev-server进行更多的配置

devServer:{
    //首次打包成功后，自动打开浏览器
    open:true,
    //设置实时打包所使用的主机地址
	host:"127.0.0.1"
    //设置实时打包所使用的端口号，在http协议中，如果端口号是80，则可以被省略
    port:80
}

凡是修改了配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效

webpack中的Loader

基础知识

概念：webpack默认只能打包处理以 .js后缀名结尾的模块。其他非 .js后缀名结尾的模块，无法处理，需要调用loader加载器才可以正常打包。

作用：协助webpack打包处理特定的文件模块

• css-loader：打包处理css相关文件
• less-loader：打包处理less相关文件
• babel-loader：打包处理webpack无法处理的高级js语法

使用示例

打包处理css文件

1. 运行npm i style-loader@3.0.0 css-loader@5.2.6 -D 命令，安装处理css文件的loader
2. 在webpack.config.js的module->rules数组中，添加loader

module:{//所有第三方文件模块的匹配规则
    rules:[//文件后缀名的匹配规则
        //定义了不同模块对应的Loader
        {test:/\.css$/,use:['style-loader','css-loader']}
    ]
}

• use数组中指定的loader顺序是固定的
• 多个Loader的调用顺序是：从后往前调用

处理过程

1. webpack把index.css这个文件，先转交给最后一个loader进行处理（先转交给css-loader）
2. 当css-loader处理完毕之后，会把处理的结果，转交给下一个loader（先转交给style-loader)
3. 当style-loader处理完毕之后，发现没有下一个Loader了，则把处理的结果转交给了webpack
4. webpack把style-loader处理的结果，合并到/dist/bundle.js中，最终生成打包好的。

打包处理less文件

1. 运行npm i less-loader@10.0.1 less@4.1.1 -D命令
2. 在webpack.config.js的module->rules数组中，添加loader：

module:{
    rules:[
        //定义了不同模块对应的Loader
        {test:/\.less$/,use:['style-loader','css-loader','less-loader']}
    ]
}

打包处理样式表中与url路径相关的文件

1. 运行npm i url-loader@4.1.1 file-loader@6.2.0 -D命令
2. 在webpack.config.js的module->rules数组中，添加loader：

module:{//所有第三方文件模块的匹配规则
    rules:[
        {test:/\.jpg|png|gifs$/,use:"url-loader?limit=22229"}
    ]
}

• ? 之后是loader的参数项
• limit用来指定图片的大小，单位是字节（byte)
• 只有小于等于limit大小的图片，才会被转为base64格式的图片

打包处理js文件中的高级语法

webpack只能打包处理一部分高级的js语法，对于无法处理的高级js语法，需要借助babel-loader进行打包处理。

1. 运行npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D安装对应的依赖包
2. 在webpack.config.js的module->rules数组中，添加loader：

module:{
    rules:[   
        {test:/\.js$/,use:'babel-loader',exclude:/node_modules/ }
    ]
}

注意：必须使用exclude指定排除项，因为node_modules目录下的第三方包不需要被打包

3、配置babel-loader

在根目录下，创建名为babel.config.js的配置文件，定义Babel的配置项如下：

module.exports = {
    //声明 babel 可用的插件
    plugins:[['@babel/plugin-proposal-decorators',{legacy :true}]]
}

打包发布

配置webpack的打包发布

在package.json文件的scripts节点下，新增命令如下：

"scripts": {
    "dev": "webpack serve --mode development",
    "build":"webpack --mode production"
}

注意

• 开发环境中运行dev命令，serve是将生成的文件加载到内存中。而项目发布时，运行build命令，
• –model 是一个参数项，指定webpack的运行模式。production代表生产环境，会对打包生成的文件进行代码压缩和性能优化。 会覆盖webpack.config.js中 的model选项。

在终端中运行npm run build进行发布上线，但是这并不是最优化的结果

优化js文件和图片的存放路径

js文件统一生成到js目录中

在webpack.config.js配置文件中的output节点中 ，继续配置：

output:{
    path:path.join(__dirname,'dist'),
        filename:"js/bundle.js"
}

把图片文件统一生成到img目录中

修改webpack.config.js中url-loader配置项，新增outputPath选项即可指定图片的存放路径

{test:/\.jpg|png|gifs$/,use:"url-loader?limit=470&outputPath=images"}

在配置url-loader时，多个参数之间使用&符号进行分隔

注意： 为了防止打包发布时旧文件的干扰，需要手动的删除旧的dist文件，然后再运行build命令

使用clean-webpack-plugin插件自动删除dist目录

在上一步我们说到，为了防止旧文件对我们的干扰，每次运行build命令之前，我们需要手动地将旧的dist文件进行删除，本节将介绍一个clean-webpack-plugin插件来自动清理dist目录下的旧文件。

官方文档：npm clean-webpack-plugin

1. 运行npm install clean-webpack-plugin@3.0.0 -D 安装清理dist目录的webpack插件

2. 使用方法：

   //按需导入插件，得到插件的构造函数
   const { CleanWebpackPlugin } = require('clean-webpack-plugin');
   //创建插件的实例对象，并将其加载到plugins节点之下
   const webpackConfig = {
       plugins: [
           /**
            * All files inside webpack's output.path directory will be 				removed once, but the
            * directory itself will not be. If using webpack 4+'s default 				configuration,
            * everything under <PROJECT_DIR>/dist/ will be removed.
            * Use cleanOnceBeforeBuildPatterns to override this behavior.
            *
            * During rebuilds, all webpack assets that are not used anymore
            * will be removed automatically.
            *
            * See `Options and Defaults` for information
            */
           new CleanWebpackPlugin(),
       ],
   };
   module.exports = webpackConfig;
   

SourceMap

定义

SourceMap 就是一个信息文件，存储着位置信息即SourceMap文件中存储着压缩混淆后的代码所对应的转换前的位置。这样除错工具将直接显示原始代码，而不是转换后的代码，方便后期的调试。

解决SourceMap的问题

开发环境下，在webpack.config.js中添加如下的配置，从而保证运行时报错的行数与源代码的行数保持一致

module.exports = {
    mode:"development", 
    devtool:'eval-source-map'
}

只定位行数不暴露源码

在发布项目的时候，出于安全性考虑一般建议关闭Source Map，防止源码泄露，提高网站的安全性。在生产环境下，如果只想定位报错的具体行数，且不想暴露源代码，可以将devtool的值设置为nosources-source-map，所以在实际发布时，既可以关闭SourceMap 也可以修改devtool的值。

小贴士

1、执行npm install时出现npm notice created a lockfile as package-lock.json. You should commit this file.
在package.json中增加private字段，将项目声明为私有的项目，并重新运行

2、如果出现如下报错

首先先在package.json中设置：

  "scripts": {
    "dev": "webpack serve --mode development"
  },

接下来在webpack.config.js中设置

module.exports ={
    //代表运行模式:development / production   ---->开发的不同阶段
    mode: 'development',
}

3、如果需要调用的loader只有一个，则只传递一个字符串也行，如果有多个，则必须指定数组

4、建议使用@表示src源代码目录，从外往里找，不要使用…/从里往外找，在webpack中需要先配置，在webpack.config.js的resolve节点下配置

resolve:{
    alias:{
        '@':path.join(__dirname,'./src/')
    }
}

告诉webpack，代码中的@表示src这一层目录