从零开始用webpack搭建一个vue项目（一）

一、依赖安装

首先考虑到一个vue项目需要用到的库有vue、element-ui、axios，先进行安装

npm i vue element-plus axios

安装完后会生成package-lock.json、package.json和node_modules，安装的版本如下：
然后要安装webpack及需要用到的loader
-D为安装开发依赖，只用于开发环境，安装完后会被写入package.json的devDependencies对象中

npm i -D webpack webpack-cli webpack-dev-server vue-loader vue-template-compiler sass-loader sass css-loader style-loader babel-loader @babel/core @babel/preset-env --legacy-peer-deps

安装完后，package.json如下：

二、webpack基础配置

首先新建src目录下的main.js作为项目的入口文件，新建webpack.config.js，具体配置如下：

//用commonjs的导入模块
const path = require('path')
const {VueLoaderPlugin} = require('vue-loader')

//用commonjs导出一个对象
module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname ,'dist'),
        filename:'bundle.js'
    },
    module:{
        rules:[
            {test:/\.vue$/,use:'vue-loader'},
            {test:/\.s[ca]ss$/,use:['style-loader','css-loader','scss-loader']},
            {
                test:/\.?js$/,
                use:{
                    loader:'babel-loader',
                },
                exclude: /node_modules/
            },
            {test:/\.(png|jpe?g|gif|svg|webp)$/,type:'asset/resource'}
        ]
    },
    plugins:[
        new VueLoaderPlugin()
    ],
    devServer:{
        static:'./dist'
    }
}

在这个配置文件中，有以下几个注意点：
1、output为打包的出口文件，path必须为绝对路径。
2、module中配置一些loader，因为webpack默认只支持js模块，loader的作用就是可以将css、vue等转化为js供webpack进行打包。
3、解析scss/sass文件需要三个loader，可以写成一个数组的形式，并且按调用的顺序从后往前写，最先需要用的scss-loader写在数组最后。
4、plugins中配置需要用到的插件，插件的作用是扩展webpack的功能。
5、webpack-dev-server会自动帮我们开启一个服务，并实时编译代码

三、配置命令行语句

在使用vue脚手架的时候，我们在终端输入npm run serve就可以开启一个服务并实时编译代码，这个其实就是在package.json中做相应的配置，配置如下：

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

配置后执行npm run serve就相当于执行webpack serve --mode=development。此时webpack的基础配置已经结束，接下来要引入vue。

四、解析打包后的文件

src/main.js

const css = require("css-loader!./index.css");
const a = 100;
console.log(a, css);

src/index.css

body {
    width: 100%;
    height: 100vh;
    background-color: orange;
  }

终端运行npm run serve，在dist目录下得到打包文件bundle.js
解析bundle.js
整个bundle是个立即执行函数，用于模块的创建和执行，相当于把各个模块合成一个巨大的模块，每个模块都被包裹成一个函数，保证变量的私有域
webpack封装了require，通过__webpack_require__引入模块

将main.js改为

const css = import("css-loader!./index.css");
const a = 100;
console.log(a, css);

使用import()函数实现动态加载。重新打包，除了bundle.js外还生成了一个打包文件，这个文件把我们 import 的模块放进了一个单独的 js 文件中，webpack打包后的额文件能实现动态加载的主要逻辑为：
1、调用模块时会在 window 上注册一个 webpackChunk 数组
2、webpack 会动态创建一个 script 标签去加载这个模块，加载成功后会将该模块注入到 webpackChunk 中
3、webpackChunk.push 会调用 webpackJsonpCallback 拿到模块
4、模块加载完再使用 webpack_require 获取模块

/******/ 		var chunkLoadingGlobal = self["webpackChunk"] = self["webpackChunk"] || [];
/******/ 		chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
/******/ 		chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
/******/ 	})();