作為一個初學者，記錄自己踩過的坑是個好的習慣。我本身比較懶，這里剛好有時間把自己的搭建過程記錄一下
這里是參考文章 https://www.jianshu.com/p/1fc5b5151abf
文章里面用的是 yarn 我這里用npm
1 安裝 webpack 4.0 和webpack-cli
2 項目初始化
npm init -d
3安裝 vue webpack webpack-dev-server -d
npm i vue webpack webpack-dev-server -d
等個幾分鍾，啦啦啦
有幾個warn，先不用管他 ，
下面是版本
4.新建文件
在項目根目錄下新建一個index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html>
在項目根目錄下新建一個webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {};
新建src文件夾目錄，並且在src下新建main.js和utils.js，此時目錄結構如下：
main.js
var say = require('./utils');
say();
utils.js
module.exports = function say() {
console.log('hello world');
}
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/main.js', // 項目的入口文件，webpack會從main.js開始，把所有依賴的js都加載打包
output: {
path: path.resolve(__dirname, './dist'), // 項目的打包文件路徑
publicPath: '/dist/', // 通過devServer訪問路徑
filename: 'build.js' // 打包后的文件名
},
devServer: {
historyApiFallback: true, //historyApiFallback設置為true那么所有的路徑都執行index.html。
overlay: true // 將錯誤顯示在html之上
}
};
配置一下package.json的啟動命令
運行
npm run dev
ok成功了
再修改一下，讓項目自動打開瀏覽器
5.安裝html-webpack-plugin解析html模版(npm i html-webpack-plugin -D)並且配置webpack.config.js文件
6.安裝vue-loader和vue-template-compiler解析vue模版(npm i vue-loader vue-template-compiler -D),並且配置webpack.config.js文件
7.在src下新建一個App.vue文件，並且在js中導入，然后導入到index.html
main.js
運行 npm run dev