todo項目總結

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

相關文章
相關標籤/搜索