初始化项目
生成package.js文件
npm i init -y
下载生产依赖
npm i vue@2
下载开发依赖
npm i -D webpack webpack-cli vue-loader@15.9.3 vue-template-compiler sass-loader sass css-loader style-loader babel-loader @babel/core @babel/preset-env
webpack-cli：提供终端命令去调用webpack
vue-loader：vue代码转换为js
vue-template-compiler：vue代码中template转换为html
下载loader：用于代码转换，比如sass->css es6->es5
创建基本文件目录
--dist
index.html
--src
App.vue 根页面
main.js 入口文件
webpack.config.js
package.json
/dist/index.html
/src/App.vue
/src/main.js
import Vue from "vue";
import App from "./App.vue";
new Vue({
el: "#app",
render: (h) => h(App),
});
webpack.config.js
const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
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: /\.m?js$/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
{
test: /\.(png|jpe?g|gif|svg|webp)$/,
type: "asset/resource",
},
],
},
plugins: [new VueLoaderPlugin()],
};
package.json
{
"name": "vue2_webpack_base",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"serve":"webpack --mode=development"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.7.16"
},
"devDependencies": {
"@babel/core": "^7.23.7",
"@babel/preset-env": "^7.23.7",
"babel-loader": "^9.1.3",
"css-loader": "^6.8.1",
"sass": "^1.69.6",
"sass-loader": "^13.3.3",
"style-loader": "^3.3.3",
"vue-loader": "15.9.3",
"vue-template-compiler": "^2.7.16",
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4"
}
}
启动打包命令：
npm run serve
注意点
这里需要注意一下，下载vue时候需要指定vue2版本：npm i vue@2
而且vue-loader使用15.9.3即可
好文阅读
发表评论