使用webpack、vue來開發一個todo項目
Greta有話說：
我是從有道雲筆記中粘貼過來的，圖片不顯示，
請點擊鏈接，查看完整筆記：點我！有道雲筆記
part1、開始，簡單的配置
一、準備工作
webpack
webpack-dev-server
webpack打包優化：
(1)、網絡優化，減少http請求
(2)、壓縮靜態資源
(3)、使用瀏覽器長緩存，盡量減少網絡流量
二、思考：如何體驗前端價值？
數據緩存、考慮前端工程化概念（es6、less）
網絡優化：加快http請求速度、如何緩存http請求
API定制
nodejs層：轉發、數據處理
註意：不要花費過多時間去做業務處理
定制和修改vue-cli配置
三、開始demo
1、webpack搭建工程
2、實現todo應用
四、簡單使用webpack --config webpack.config.js
1、使用當前目錄下的webpack，而不是全局webpack
2、添加處理.vue文件類型的loader,
原因是：webpack默認只能處理.js文件，ES5語法
3、添加vue-loader之後還是報錯
解決辦法如下：添加VueLoaderPlugin
4、style-loader的作用，是將css文件轉換成一個style的dom節點，插入html文件中
5、使用less文件
npm i less less-loader --save-dev
五、使用
1、process.env
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js"
當用戶使用 npm run build命令時，定義變量 NODE_ENV 值為 production ，
在webpack.config.js文件中，通過process.env.NODE_ENV 得到。
cross-env：實現跨平臺
2、webpack.DefinePlugin
plugins: [
new webpack.DefinePlugin({
// 利於打包的時候，使用vue源碼的開發版本還是生產版本
‘process.env‘: {
NODE_ENV: isDev ? ‘"development"‘ : ‘"production"‘
}
}),
new VueLoaderPlugin(),
// 生成一個index.html,將代碼插入進去，確保可以訪問
new HtmWebpackPlugin()
],
3、 使用webpack-dev-server進行簡單的配置
（1）devtool：用於調試
（2）hot：瀏覽器監聽到項目文件變化後，不刷新頁面，只刷新組件進行更新
更新組件代碼，不刷新頁面，只刷新更新的組件的那部分視圖，同時添加兩個webpack內置plugin:HotModuleReplacementPlugin、NoEmitOnErrorsPlugin
config.devServer.hot = true
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
// NoEmitOnErrorsPlugin:減少一些不必要的提示
new webpack.NoEmitOnErrorsPlugin()
)
（3）extract-text-webpack-plugin： 將css文件單獨打包出來
默認會將css文件打包在bundle.js文件中，這樣bundle.js文件體積過大，我們將css文件單獨打包出來
代碼如下：
config.module.rules.push({
test: /\.less$/,
use: ExtractTextWebpackPlugin.extract({
fallback: ‘style-loader‘,
use: [
‘css-loader‘,
{
loader: ‘postcss-loader‘,
options: {
sourceMap: true
}
},
‘less-loader‘
]
})
})
config.plugins.push(
// contentHash: 內容hash
new ExtractTextWebpackPlugin(‘styles.[chunkhash:8].css‘)
)
報錯a：hooks
解決辦法：npm i --save-dev extract-text-webpack-plugin@next
報錯b：
contenthash
解決辦法: 使用[chunkhash:8]
（4）optimization的splitChunks、runtimeChunk： 將第三方依賴的包、webpack的源碼：單獨打包至一個文件
代碼如下：
optimization: {
splitChunks: {
chunks: "all"
},
runtimeChunk: true
}
part2: vue
一、vue2的核心知識
（1）數據綁定
（2）vue文件格式
（3）render方法
二、api重點
（1）生命周期方法
（2）computed:實時計算 姓+名
part3: webpack的詳細說明
一、loader
二、plugin
（1）使用extract-text-webpack-plugin 進行處理，將css單獨打包至一個文件
三、webpack中使用的一些變量
（1）hash、contenthash、chunkhash
hash值打包後只生成一個，但是chunkhash是不同的值
使用webpack、vue來開發一個todo項目