阿狗工具
三分钟快速搭建Vue2+webpack项目
项目目录
如下图：
图1
其中：
【package.json】：对项目进行描述，包括项目的基本信息、依赖模块的版本信息等等；
注意：可以手动创建或者通过npm init自动创建。
代码：
{
"name": "yydpt_vue2_base",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"dev-build-server": "webpack --config ./webpack.dev.config.js --progress",
"dev-server": "webpack-dev-server --open chrome --config ./webpack.dev.config.js --progress"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.17.8",
"@babel/preset-env": "^7.16.11",
"babel-loader": "^8.0.5",
"css-loader": "^3.5.3",
"html-webpack-plugin": "^4.3.0",
"style-loader": "^1.2.1",
"vue": "^2.7.0",
"vue-cli": "^2.9.6",
"vue-loader": "^15.10.0",
"vue-template-compiler": "^2.6.12",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"vue": "^2.7.0",
"vue-cli": "^2.9.6",
"webpack": "^4.46.0",
"webpack-dev-server": "^3.11.0"
}
}
代码写好之后执行下【npm install】，这样才能下载项目的依赖模块；
【node_modules】：存放依赖模块的文件夹；
注意：执行npm install 之后会自动生产node_modules这个文件，并将下载的依赖模块放入此文件中。
【package-lock.json】：锁定依赖模块的版本；
注意：执行【npm install】 之后自动生成的文件。
【webpack.dev.config.js】：webpack的配置文件，用来编译项目、打包项目、启动服务等等；
注意：自己手动创建，此项目的该配置文件主要是开发环境使用。
代码：
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' // 出口文件名
},
devServer:{
port:8888, // 设置端口号，如果没有设置，会默认端口号
},
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内
})
],
}
【webpack.prod.config.js】：和webpack.dev.config.js文件一样的，只不过这个文件是在生产环境使用；
【src】：这个文件夹下面一般放的是项目代码；
注意：自己手动创建。
在src文件夹下分别创建
index.html
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Vue2</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
App.vue
代码：
<template>
<div>
{{welcome}}
</div>
</template>
<script>
export default {
name:"vue2",
data() {
return {
welcome: "月影WEB 欢迎大家来学习各种技术知识！"
}
}
}
</script>
<style>
</style>
【build】：发布版本的时候，项目编译打包的文件所放的目录；
注意：文件是在编译打包的过程之中自动生成，该文件的名称是webpack.dev.config.js这个配置文件之中的配置设置的。
以上就是一个基础的Vue2+webpack项目的相关代码了；
如果需要对项目进行编译打包只需要执行：【npm run dev-build-server】
就会将这个项目编译打包到build 这个文件夹下了。
如果需要启动这个项目的服务只需要执行：【npm run dev-server】
就能启动该项目的服务了。
这一篇文章是快速的搭建一个简单的【vue2+webpack】项目，因此没有非常详细的写每一步的代码，如果需要从头跟着每一步进行开发的话，可以去看
https://www.jianshu.com/c/324cfc38f401
这个专栏的文章，里面从头到尾的详细的写了每一步的过程。