vue+webpack項目配置:css
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
項目初始化完後。html
新建app.vue,結構:template、style、script(暫時沒法使用)
建立webpack.config.js文件(打包前端資源:圖片、字體)前端
const HTMLPlugin=require('html-webpack-plugin')vue
const webpack=require('webpack')react
const ExtractPlugin=require(‘extract-text-webpack-plugin’)//把非js的文件打包成靜態資源文件,可能單獨作瀏覽器緩存,或者通過js寫入到瀏覽器中,對效率有影響,但願在http頭引入單獨csswebpack
const isDev=process.env.NODE_ENV==='development' //process.env存儲啟動腳本的對象,package.jsonweb
const config={
entry:path.join(__dirname,'src/index.js')//絕對路徑,dirname文件根目錄,join拼接做用,造成絕對路徑npm
output:{json
filename:‘bundle.[hash:8].js’,babel
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