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