使用webpack搭建vue開發環境
1 先去node.js官網下載nodejs並且安裝
安裝成功之後在命令列輸入node -v 回車，npm -v回車如果顯示對應的版本號，說明node安裝成功，自帶的npm也安裝成功
2 在d盤下建立一個目錄比如demo目錄
3 在命令列輸入d：回車，然後在輸入cd demo回車切換到建立的目錄下：
4 然後用npm初始化該目錄：npm init 回車，完成後會在demo目錄下生成一個package.json的檔案
5 在本地區域性安裝webpack
npm install webpack --save-dev
安裝成功之後會在package.json檔案中多一項配置
"devDependencies": { "webpack": "^4.26.0" }
6 接著在本地安裝webpack-dev-server 他可以在開發環境中提供很多服務，比如啟動一個伺服器，熱跟新，介面代理等
如果在devDependencies中包含webpack和webpack-dev-server,則表示安裝成功
"devDependencies": {
"webpack": "^4.26.0",
"webpack-dev-server": "^3.1.10"
}
7 其實webpack就是一個.js的配置檔案
然後在demo目錄下建立一個webpack.config.js檔案，並初始化他的內容為：
var config = {
};
module.exports = config
8 然後再package.json的scripts裡增加一個快速啟動webpack-dev-server服務的指令碼
9 當執行npm run dev命令時就是執行webpack-dev-server --open --config webpack.config.js命令
--config是指向webpack-dev-server讀取的配置檔案
--open會在執行命令時自動在瀏覽器開啟頁面，預設地址是127.0.0.1:8080，ip和埠都是可以配置的：
10 配置webpack最重要的必選的入口entry和出口output
entry：告訴webpack從哪裡尋找依賴，並且編譯
output：用來配置編譯後的檔案儲存位置和檔名
在demo目錄下新建main.js作為入口的檔案，然後再webpack.config.js中進行入口和出口的配置
// var path=require("path"); var config = { entry:{ //配置的單入口，webpack會從main.js檔案開始工作 main:'./main' }, output:{ //打包後文件的輸出目錄 path:path.join(_dirname,'./dist'), //指定資原始檔引用的目錄 publicPath:'/dist/', //用於指定輸出檔案的名稱 filename:'main.js' } }; module.exports = config
這裡配置的output意思為打包後的檔案會儲存為demo/dist/main.js
11 在demo目錄下新建一個index,html作為我們spa的入口
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>webpack app</title>
</head>
<body>
<div id="app">
hello word
</div>
<script type="text/javascript" src="/dist/main.js"></script>
</body>
</html>
12 在終端執行下面的命令就會在瀏覽器中開啟index頁面
npm run dev
如果執行後報錯如下：
那是因為webpack 4以上把命令遷移到webpack-cli上，可以下區域性執行如下命令來安裝
npm i -D webpack-cli來安裝
安裝完之後繼續執行npm run dev如果有如有如下錯誤
檢查全域性變數_dirname的下劃線是不是兩個__dirname,否則將顯示如下頁面
至此已經完成了webpack+vue配置的最重要一步了
13 webpack --progress --hide-modules
接下來逐步完善配置檔案：
對於不同的模組需要用不同的載入器來處理，而載入器就是webpack最重要的功能，通過安裝不同的載入器可以對各種檔案字尾名進行處理
比如處理css樣式：就要安裝style-loader和css-loader,通過npm來安裝
npm install css-loader --save-dev
npm install style-loader --save-dev
14 安裝完載入器之後再webpack.config.js檔案中配置載入器
module:{ //再module物件的rules屬性可以指定一系列的loeders，每一個loader都必須包含test和use兩個選項 //此配置的意思： //當webpack編譯過程中遇到require和import語句匯入一個字尾名為.css的檔案時 //，先將他通過css-loader轉換，再通過style-loader轉換，然後繼續打包 rules:[ { test:/\.css$/, use:[ 'style-loader', 'css-loader' ] } ] }
15 使用webpack的外掛plugins
extract-text-webpack-plugin：提取css，生成一個main.css的檔案
通過npm安裝該外掛
npm install extract-text-webpack-plugin --save-dev
16 安裝完成後再webpack-config.js中匯入外掛，並改寫loader的配置
var extractTextPlugin=require('extract-text-webpack-plugin');
{ test:/\.css$/, use:extractTextPlugin.extract({ use:'css-loader', fallback:'style-loader' }) }
plugins:[//重新命名提取後的css檔案 new extractTextPlugin("main.css") ]
17 然後再index頁面通過link的方式應用，如果報這種錯誤
(node:30260) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead i ｢wds｣: Project is running at http://localhost:8080/ i ｢wds｣: webpack output is served from /dist/ i ｢wdm｣: wait until bundle finished: /dist/main.css i ｢wdm｣: wait until bundle finished: /dist/main.js D:\demo\node_modules\webpack\lib\Chunk.js:846 throw new Error( ^ Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead at Chunk.get (D:\demo\node_modules\webpack\lib\Chunk.js:846:9) at D:\demo\node_modules\extract-text-webpack-plugin\dist\index.js:176:48 at Array.forEach (<anonymous>) at D:\demo\node_modules\extract-text-webpack-plugin\dist\index.js:171:18 at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\demo\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:7:1) at AsyncSeriesHook.lazyCompileHook (D:\demo\node_modules\tapable\lib\Hook.js:154:20)
說明你用的是webpack 4以上的版本，4以上的版本不支援extract-text-webpack-plugin這個外掛
解決辦法：mini-css-extract-plugin這個外掛代替，安裝
18 使用webpack構建vue專案時可以使用一種新的構建模式.vue單檔案元件
.vue單檔案元件：一個字尾名為.vue的檔案，在webpack中使用vue-loader就可以對這種檔案進行處理：一個.vue檔案包含三部分tempale，script，style
按照如下所示順序安裝來使用.vue檔案
npm install --save vue
npm install --save-dev vue-loader
npm install --save-dev vue-style-loader
npm install --save-dev vue-template-compiler
npm install --save-dev vue-hot-reload-api
npm install --save-dev babel
npm install --save-dev babel-loader
npm install --save-dev babel-core
npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-runtime
19 安裝完成後修改webpack.config.js來支援vue檔案和ES6的解析
{ test:/\.css$/, use:[ { loader:extractTextPlugin.loader, options:{ } }, 'css-loader' ] }, { test:'/\.js$/', loader:'babel-loader', exclude:/node_modules/ }, { test:'/\.vue$/', loader:'vue-loader', }
20 在demo目錄下新建一個名為.babelrc的檔案，並寫入babel的配置，webpack會依賴此配置檔案來使用babel編譯es6程式碼
{ "presets":["es2015"], "plugins":["transform-runtime"], "commments":false }
21 配置好這些就可以使用vue檔案了