2024基于webpack从0搭建vue项目，vue2

“keywords”: [],

“author”: “”,

“license”: “ISC”,

“devDependencies”: {

“@babel/core”: “^7.17.5”,

“@babel/preset-env”: “^7.16.11”,

“babel-loader”: “^8.2.3”,

“clean-webpack-plugin”: “^4.0.0”,

“css-loader”: “^6.6.0”,

“file-loader”: “^6.2.0”,

“html-webpack-plugin”: “^5.5.0”,

“sass”: “^1.49.8”,

“sass-loader”: “^12.6.0”,

“style-loader”: “^3.3.1”,

“url-loader”: “^4.1.1”,

“vue-loader”: “^17.0.0”,

“vue-template-compiler”: “^2.6.14”,

“webpack”: “^5.69.1”,

“webpack-cli”: “^4.9.2”,

“webpack-dev-server”: “^4.7.4”

},

“dependencies”: {

“vue”: “^3.2.31”

}

}

在根目录下创建一个 webpack.config.js 文件

// 导入核心模块 path

const path = require(‘path’)

// 导入自动生成html文件的插件

const HtmlWebpackPlugin = require(‘html-webpack-plugin’)

// 导入自动清除 dist 目录的插件

const {

CleanWebpackPlugin

} = require(‘clean-webpack-plugin’)

// 配置文件

module.exports = {

// 配置入口

entry: ‘./src/main.js’,

// webpack.config.js 文件 配置出口

output: {

filename: ‘main[hash:8].js’, // 出口文件的名称 ‘main[hash:8].js’ 清除缓存

path: path.join(__dirname, ‘/dist’) // 出口文件生成的路径

},

// 配置 mode, development 开发环境 production 生产环境

mode: ‘production’,

// 配置解析

resolve: {<