[零基础学习Vue2+webpack项目]的webpack对vue3进行编码打包的详解（2）

声明这篇文章是【vue2+webpack】；

在：
[零基础学习Vue2+webpack项目]的基础依赖项的安装详解（1）https://yydpt.blog.csdn.net/article/details/125590932
中已经对【vue2+webpack】的基础依赖项进行了安装和讲解，这篇文章继续对项目的依赖项进行完善。

首先在【package.json】文件中的scripts加上"start": "webpack"；

然后执行package.json中scripts的"start": "webpack"

也就是在编辑器vsCode的终端中输入：【npm run start】

如下图：

图1

 

会出现如上图提示，然后按照提示输入：【yes】

如果出现了如下图报错：

如下图：

图2

 

可能就是本地的【node版本】与【webpack】不匹配，这时可以将【node升级】或者将【webpack降级】即可；

本项目是更改的【webpack】：

【webpack】对应的版本分别改成以下版本：（其中多加了webpack-cli和webpack-dev-server）

    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"

如下图：

图3

 

如果没有报错，那么直接安装【webpack-cli】、【webpack-dev-server】这两个依赖即可；

这里因为有报错，所以需要重新安装依赖项，可以删除node_modules这个依赖项文件夹（或者将已经下载的依赖项用命令进行卸载也行，卸载的命令是：npm uninstall 【需要卸载的依赖】）之后，

在终端中输入：【npm install】进行重新下载安装依赖项；

重新安装package.json中的依赖项及其版本之后再在终端中输入：【npm run start】

执行完成之后，项目中多出了一个【dist】的文件夹，里面包含了一个【main.js】的文件；

main.js 在该文件中可以找到在src文件夹下index.js中代码，因为在没有设置webpack的配置文件时，默认就是打包的src/index.js这个文件；

此时表示能够成功打包项目但是终端会提示未设置mode的警告；

如下图：

图4

这时就需要设置配置文件了，新建开发环境和生产环境的配置文件，分别为：

【开发环境】：webpack.dev.config.js  （在本地做项目开发的过程中使用的配置文件）

【生产环境】：webpack.prod.config.js（项目已完成并上线使用的配置文件）

然后对开发环境的配置文件进行编写；

在webpack.dev.config.js文件中加入以下代码：

module.exports = {
    mode:'development',
}

其中的【'mode'】选项没有被设置的情况下，webpack将为这个值回退到【'production'】。

【'mode'】设置选项有两种：

第一种：（开发）'development'

第二种：（生产）'production'

为每个环境启用对应的默认值。

也可以把它设置为'none'来禁用任何默认行为；

这里我们设置为'development'，因为目前项目属于开发过程之中；

如下图：

图5

 

接着在package.json中的scripts对象中加入：

"dev-build-server": "webpack --config ./webpack.dev.config.js --progress"

表示根据webpack.dev.config.js这个配置文件进行打包；

其中的 --progress 表示显示打包的进度，这个可以在终端看到打包的进度；

在终端中输入：【npm run dev-build-server】

进行再次打包，

如下图：

图6

 

这样就不会出现之前的警告提示了；

以上是webpack对默认文件进行打包，并且打包到默认路径的过程；

----------------------------------------------------------------------------------------------------------------

接下去就是对vue代码进行打包的相关配置：

首先在package.json的devDependencies中加入以下代码：

    "babel-loader": "^8.0.5",
    "@babel/core": "^7.17.8",
    "@babel/preset-env": "^7.16.11",
    "style-loader": "^1.2.1",
    "css-loader": "^3.5.3",
    "html-webpack-plugin": "^4.3.0",
    "vue-loader": "^16.0.0-beta.4",
    "@vue/compiler-sfc": "^3.2.33",

其中

【babel-loader】：这个loader主要作用是在Webpack打包的时候，用Babel将ES6的代码转换成ES5版本的。

【@babel/core】：作用是把 js 代码分析成 ast ，方便各个插件分析语法进行相应的处理。有些新语法在低版本 js 中是不存在的，如箭头函数，rest 参数，函数默认值等，这种语言层面的不兼容只能通过将代码转为 ast，分析其语法后再转为低版本 js。

【@babel/preset-env】：在官网介绍是一款自动管理浏览器版本和babel语法转换插件映射的一款工具。

【style-loader】：将所有的计算后的样式加入页面中,html页面中插入css代码。

【css-loader】：解析CSS样式，可以用模块的方式手动对象形式写样式，style-loader自动处理了这个注入。

【html-webpack-plugin】：将vue或者react编译打包后的文件直接注入到html模板中。

【vue-loader】：是一个webpack的loader，是vue文件的一个加载器，主要用来处理vue组件文件，配合 webpack以及相关loader，来进行编译模版、scoped CSS和热重载。

【vue-template-compiler】：使用vue-template-compiler直接读取处理了.vue文件SFC内容，将.vue文件处理为一个AST

以上这几个库简单一点来说就是将vue的代码解析转化成浏览器能读取并能实现效果显示的工具。

接着在终端中输入：【npm install】

下载以上加入的库，使用【npm install】的好处就是一次性下载package.json所写的依赖项，不用一个一个的去下载；

接下去就是继续对webpack.dev.config.js文件进行配置：

代码如下：

const path = require('path');
const { VueLoaderPlugin }=require("vue-loader")
var HtmlWebpackPlugin = require('html-webpack-plugin');         // 把打包后的文件直接注入到html模板中
 
module.exports = {
    mode:'development',                                         // 设置开发模式
    output:{
        path:path.resolve(__dirname,'./build/development'),     // 动态获取出口路径(绝对路径)-文件编译后的位置
        filename:'bundle.js'                                    // 出口文件名
    },
    module: {
        rules: [
            {
                test: /\.(js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['@babel/preset-env'],
                    }
                },
                exclude: /node_modules/
            },{
                test:/\.(css)$/,
                use:[{
                        loader:"style-loader"                   // 将所有的计算后的样式加入页面中,html页面中插入css代码
                    },{
                        
                        loader:"css-loader",                    // 解析CSS样式,可以用模块的方式手动对象形式写样式,style-loader自动处理了这个注入
                    },//能够使用类似@import 和 url(...)的方法实现 require()的功能
                ]
            },{
                test:/\.(vue)$/,
                use:{
                    loader:"vue-loader"
                }
            }
        ],
    },
    plugins:[
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({                                 // 把打包后的文件直接注入到html模板中
            title:'平台',
            template:path.join(__dirname, "./src/index.html"),  // 指定模板页面 
            filename: 'index.html',                             // 模板的名称
            inject: 'body',                                     // 将编译的vue的js文件注入到模板页面的body内
        })
    ],
}

加上以上代码之后，【vue2项目】的webpack对vue2进行编码打包的相关配置就设置的差不多了，而以上代码也有对关键对象属性做对应的注释，如果有看不懂的可以留言交流；

接下去就可以开始正式的写vue2项目的代码了。

这篇文章先讲到这里，下篇文章更精彩。

关注公众号（月影WEB），了解更多的前后端知识；

欢迎大家关注互相交流学习；