todo项目总结
vue+webpack项目配置：
npm init -->package json
npm i webpack vue vue-loader不区分Devdefenc和defenice依赖
warning 1：第三方依赖css-loader
warning 2：
安装vue所需依赖：
npm i css-loader vue-template-compiler
项目初始化完后。
新建app.vue，结构：template、style、script（暂时无法使用）
创建webpack.config.js文件（打包前端资源：图片、字体）
const HTMLPlugin=require('html-webpack-plugin')
const webpack=require('webpack')
const ExtractPlugin=require（‘extract-text-webpack-plugin’）//把非js的文件打包成靜態資源文件，可能單獨做瀏覽器緩存，或者通過js寫入到瀏覽器中，對效率有影響，希望在http頭引入單獨css
const isDev=process.env.NODE_ENV==='development' //process.env存儲啟動腳本的對象，package.json
const config={
entry：path.join(__dirname,'src/index.js')//绝对路径,dirname文件根目錄，join拼接作用,形成絕對路徑
output：{
filename：‘bundle.[hash：8].js’,
path:path.join(__dirname,'dist')//創建dist文件夾
}
//彌補webpack的功能限制
module:{
rules:[{
test:/\.vue$/ 檢測文件類型
loader：‘vue-loader’ 使用loader處理vue
}，
{
test:/\.jxs$/ 檢測文件類型
loader：‘bable-loader’ 使用loader處理jsx
}，
{
test:/\.css$/ 檢測文件類型，dev環境用不到css，都是用stylus，應該去掉這個配置
use：[
'style-loader',
css-loader’
] 使用loader處理css,不同的處理方式，將css在js里以一段js代碼出現，js代碼的作用就是把css寫到html
}，
{//處理圖片
test：/\.(jpg|png|jpeg|svg)$/
use:[{
loader:'url-loader'//圖片轉換為base64代碼，寫在js裡面
option：{//option傳到url-loader參數
limit：1024//圖片大小小於1024，就寫成base64代碼
name：'[name]-aaa.[ext]' //進來的名字name，ext文件擴展名，aaa後加后加上去
}}]},
'stylus-loader',//自動生成sourcemap，兩個可以更快
]}]
},
plugin:[
new webpack.DefinePlugin({//vue和react都會用，打包的時候根據環境選擇不同的版本代碼打包，
'process.env':{
NODE_ENV:isDev?'"development"':'"production"'//變量是單引號+雙引號
}
})
new HTMLPlugin(),
]
}
if(isDev){ //如果是開發環境，就增加config設置
config.output.filename='[name].[chunkhash:8].js'
config.module.rules.pust(
{//需要區分環境來做，需要剪切掉
text:/\.styl/,
use:[
'style-loader',
'css-loader',
{
loader:'postcss-loader',//自動生成sourcemap，前面生成就自動調用
option:{
sourcemap:true,
}
},
'sylus-loader']})
config.devtool='#cheap-module-eval-source-map'//用來在頁面上調試代碼,eval快速，soure-map完整性好，二者合併，又快又準確
config.devServer={
port=8000,
host：‘0.0.0.0’，//既可以在本地訪問，也可以接收外來訪問
overlay：
{errors：true，//如果編譯有錯誤，就顯示到網頁上},
hot:true//hot-module-replacement,防止修改組件內容后，整個頁面重新加載，可以使得頁面不刷新，就更新局部內容
open:true， //啟動dev-server，自動打開瀏覽器
}
config.plugins.push(
new webpack.HotModuleReplacementPlugin()//熱加載使用vueloader已經實現一些功能
new webpack.NotEmitOnErrorsPlugin()//避免不必要的錯誤的顯示
)
}else//正式環境
{
config.entry={
app：path.join(_dirname,'src/index.js'),
vendor:['vue']
}
config.module.rules.push({
text:'/\.style/'/
use:ExtractPlugin.extract({
fallback:'style-loader',//將處理后的css代碼包裹js代碼,js代碼的作用就是把css代碼寫到html中。寫進style標籤
use:[
'css-loader',//處理css代碼，樣式寫進單獨的css文件中
{
loader:'postcss-loader',//自動生成sourcemap，前面生成就自動調用
option:{
sourcemap:true,
}
},
'sylus-loader'
]
})
}，
config.plugin.push(
new Extractplugin('styles.[contentHash:8].css'),//根據css輸出的內容生成一個單獨的hash
new webpack.optimize.CommomsChunPlugin({//類庫文件就可以單獨打包出來了
name:'vender'//分離類庫文件，使得app.vue的大小變小
})，
new webpack.optimize.CommonsChunkPlugin({//webpack相關的文件單獨打包
name:'runtime'//把新的模塊加入給定id，id中間插入，使得模塊id變化，導致想要使用瀏覽器常緩存的想法失敗，runtime放在vendor放入後面，沒有在entry里聲明的任何一個名字
})
)
}
module.exports=config//這樣就可以修改config
index.js:入口文件，可以引入APP.vue，加入类库，使得APP.vue能够显示。
import Vue from ‘vue’:引入主件
import vue from './app.vue'
import ‘./assets/style/text.css’
import 'bg.jpeg'
const root=ducment.createElement('div')//節點
//節點插入到html
new Vue（{
render：（h）=>h(App)//視圖渲染
}）.$mount(root)//節點綁定
package.json：
script{
"bulid":"cross-env NODE_ENV=production webpack --config webpack.config.js"//指定config文件為webpack.config.js，在這裡調用避免使用全局webpack
//cross-env NODE_ENV判斷是什麼開發環境還是生產環境，cross使得在不同平台上都可以用
"dev":"cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"//設置dev環境下的webpack
}
運行指令：npm run build增加build.js
build.js
組成：依賴+vue源碼
修改module后，需要安裝相關loader。
npm i file-loader url-loader vue-loader
創建styles文件夾，創建text.css
text.css:
body{
color：red
background-image:url('../images/done.svg')
}
js圖片引入
新建text.stylus.styl
webpack-dev-server
環境變量：
npm i cross-env
入口html，容納js
npm i html-webpack-plugin
npm run dev
npm i postcss-loader autoprefixer babel-loader babel-core
創建postcss.config.css:
const autoprefixer=require('autoprefixer')//編譯后優化css代碼
module.exports={
plugins:[
antuprefixer()//自動增加瀏覽器前綴
]
}
.beble://render和jsx支持
{
“presets”：[
"env"
],
"plugin":[
"transform-vue-jsx"
]
}
npm i bable-preset-env bable-plugin-transform-vue-jsx
npm i babel-helper-vue-jsx-merge-proos babel-plugin-syntax-jsx
項目開始前刪除測試內容。
css打包：把css從bund.js打包出來
npm run build
hash
dev使用hash，build使用chunkhash.
chunkhash:chunk就是在entry里聲明的不同節點，使用異步加載的模塊，每一個模塊都是一個chunk
hash：所有打包出來的模塊都一個hash，就是應用的hash
