很多人都是直接用 vue-cli 构建vue项目，但并不清楚其中的原理，我折腾了几天，踩了一堆坑，终于自己弄出了一个 vue 项目文件，这需要 npm install 一下就能直接构建项目了
文件目录如下：
image.png
package.json如下
{
"name": "vue-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack"
},
"dependencies": {
"vue": "^2.6.10"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-component": "^0.10.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-0": "^6.24.1",
"vue-loader": "^13.3.0",
"vue-template-compiler": "^2.5.2",
"style-loader": "^0.19.0",
"css-loader": "^0.28.7",
"webpack": "^3.8.1"
}
}
webpack.config.js如下
var path=require('path')
module.exports={
entry: path.join(__dirname, './main.js'), // 入口文件
output: { // 指定输出选项
path: path.join(__dirname, './dist'), // 输出路径
filename: 'bundle.js' // 指定输出文件的名称
},
module:{
rules:[
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },//处理css文件的规则
{ test: /\.vue$/, use: 'vue-loader' },
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
]
},
resolve:{
alias:{
'vue$': 'vue/dist/vue.esm.js'
}
}
}
.babelrc如下：
{
"presets":["env", "stage-0"],
"plugins":["transform-runtime"]
}
