亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

類庫分開打包

1. 為什么？

2. 怎么做？

????????webpack.optimize.CommonsChunkPlugin

CSS單獨打包分離

????1.為什么？

????瀏覽器緩存

2.如何做

????????extrack-text-webpack-plugin

npm install --save-dev extract-text-webpack-plugin@next
升級extract-text-webpack-plugin為4.0best版本，然后將contentHash改成Hash

1. npm init初始化項目，默認配置，自動生成package.json
   

2. cnpm i webpack vue vue-loader/cnpm i css-loader vue-template-compiler

3. 在package.json中添加"build": "webpack --config webpack.config.js";添加webpack.config.js并配置

4. cnpm run build報錯，修改如下：

   1. 添加const {VueLoaderPlugin}=require('vue-loader');

      module.export={...,plugins:[new VueLoaderPlugin()]...}

   2. 添加module.export={...,module:{rules:[{test:/.vue$/,loader:'vue-loader'},{test:/.css$/,use:['vue-style-loader','css-loader']}]}}

5. cnpm run build提示：需安裝webpack-cli，通過cnpm i --save-dev [email protected]進行安裝

6. cnpm run build警告：the 'mode' option has not been set,webpack will fallback to 'production' for this value....修改package.json中"build": "webpack --config webpack.config.js"為"build": "webpack --mode development"

7. cnpm run build正確
   

1.cnpm init

2.cnpm i webpack vue vue-loader

webpack.config.js配置文件是同時用于開發環境和正式環境，所以要根據環境來判斷一些配置。判斷就通過在package.json的scripts中，通過NODE_ENV來定義不同的環境變量。而cross-env包的作用就是，統一不同操作系統下定義環境變量的方法。

遇到兩個錯誤 一個是配置好loader之后還報錯?

Make?sure?to?include?VueLoaderPlugin?in?your?webpack?config.

添加

const?{?VueLoaderPlugin?}?=?require('vue-loader');
……
plugins:?[????????new?VueLoaderPlugin(),
????],

添加完之后 運行 報錯

Module?parse?failed:?Unexpected?character?'#'

添加

const?VueLoaderPlugin?=?require('vue-loader/lib/plugin')
module.exports?=?{?
?//?...?
??module:?{??
????rules:?[??
????????{????
????????????test:?/\.vue$/,????
????????????loader:?'vue-loader'??
????????????},??????
????????{???????
????????
?????????test:?/\.css$/,???????
??????????use:?['style-loader','css-loader']???
?????????}??
????????]?
??????}?
???????plugins:
????????[?
???????????new?VueLoaderPlugin()
???????????]
????}

下一節 ?添加 sytle-loader 報錯 ? 需要先安裝 ?

npm?i?style-loader

comnfig.devtool =? '#cheap-module-eval-source-map' 將vue的代碼映射到頁面上，從而達到調試頁面的代碼而修改對應的vue代碼

vue-項目如何去定制？

小伙伴們，大家好，針對老師的視頻教程，我整理了一份完整的源碼，源碼還有詳細的注釋和筆記,供大家學習時參考。

GitHub下載地址：https://github.com/Jasonccj/vue-webpack-todo

上一節：可復用的代碼抽成模塊。