webpack配置DEMO
webpack.config.js文件官方標(biāo)配示例如下：
module.exports = {
dvtool: //配置生成Source Maps，選擇合適的選項(xiàng)
plugins: //插件項(xiàng)
entry: //頁(yè)面入口文件配置
output: //入口文件輸出配置
path: //定義輸出文件路徑
filename: //指定打包文件名稱
module: //加載器配置,對(duì)模塊的處理邏輯
loaders: //定義了一些列的加載器
test: //正則淮捆，匹配到文件的后綴名
loader/loaders: //處理匹配到的文件----注意現(xiàn)在要求loader關(guān)鍵字不準(zhǔn)省略"-loader"后綴
include: //包含的文件夾
exclude: //排除的文件夾
resolve: //其它解決方案的配置
extensions: //自動(dòng)補(bǔ)全識(shí)別后綴
}
參考各路大神的流程寫下來(lái).....應(yīng)該沒(méi)有漏掉哪一步吧戒悠？
DEMO 項(xiàng)目結(jié)構(gòu)如圖：
index.html(加載打包后的build.js)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack test</title>
</head>
<body>
<div id="test"></div>
</body>
<!-- webpack一會(huì)打包完成的js -->
<script src="build.js"></script>
</html>
app.js（返回包含問(wèn)候信息的html元素）
// app.js
module.exports = function() {
var hello = document.createElement('div');
hello.textContent = "Hello Everybody!";
return hello;
};
main.js（把a(bǔ)pp.js返回的節(jié)點(diǎn)插入頁(yè)面）
//main.js
var hello = require('./app.js');
document.getElementById('test').appendChild(hello());
webpack可以在終端使用
webpack {entry file/入口文件} {destination for bundled file/存放build.js的地方}
非全局安裝使用
node_modules/.bin/webpack app/main.js public/bundle.js
打開(kāi)index.html
這里推薦通過(guò)配置文件來(lái)使用webpack
entry和output
在webpack.config.js中entry是唯一入口文件
首先entry的值可以有三種類型：1随常、字符串；2、數(shù)組狂塘；3匾乓、對(duì)象
//與DEMO無(wú)關(guān)捞稿，此為示例說(shuō)明文件
//字符串，指定從這個(gè)文件路徑下面的文件作為打包的入口文件
entry: './src/js/main.js' , //唯一入口文件
output: {
path: 'dist/js', //打包后的文件存放地方
filename: "build.js" //文件名
}
//存在多個(gè)入口時(shí)拼缝，可以使用array的方式娱局。會(huì)將里面的文件一起打包到build.js
{
entry: ['./src/js/main.js', './src/js/test_entry.js'],
output: {
path: 'dist/js',
filename: "build.js"
}
}
//也可以是一個(gè)對(duì)象
{
entry： {
main: './src/js/main.js',
test_entry: './src/js/test_entry.js'
},
output: {
path: 'dist/js',
filename: '[name]-[chunkhash].js' //[name]的值是entry的鍵值，[hash]是打包時(shí)候的hash值咧七，chunkhash是md5加密的值衰齐，這里作為版本號(hào)使用
}
}
每次修改文件，運(yùn)行webpack后都會(huì)生成不一樣的hash和chunkhash值继阻，方便上線時(shí)候靜態(tài)資源的版本管理耻涛。
因?yàn)槲募看芜\(yùn)行都是變化的，文件引入的文件名字也是需要變化的瘟檩，這時(shí)候使用html-webpack-plugin插件 npm install html-webpack-plugin --save-dev
完成后在wenpack.config.js文件里添加plugins（plugins）的值是數(shù)組抹缕，里面的值都是new htmlWebpackPlugin()，參數(shù)見(jiàn)下文墨辛；
最后文件如下：
//與DEMO無(wú)關(guān)歉嗓，此為示例說(shuō)明文件
var htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry： {
main: './src/js/main.js',
test_entry: './src/js/test_entry.js'
},
output: {
path: 'dist/js',
filename: '[name]-[chunkhash].js' //[name]的值是entry的鍵值，[hash]是打包時(shí)候的hash值背蟆，chunkhash是md5加密的值鉴分，這里作為版本號(hào)使用
},
plugins: [
new htmlWebpackPlugin({
title: 'webpack demo',
filename: 'index-[hash].html',
template: 'index.html'
})
]
}
- title: 用來(lái)生成頁(yè)面的 title 元素
- filename: 輸出的 HTML 文件名，默認(rèn)是 index.html, 也可以直接配置帶有子目錄带膀。
- template: 模板文件路徑志珍，支持加載器，比如 html!./index.html
- inject: true | 'head' | 'body' | false ,注入所有的資源到特定的 template 或者 templateContent 中垛叨，如果設(shè)置為 true 或者 body伦糯，所有的 javascript 資源將被放置到 body 元素的底部，'head' 將放置到 head 元素中嗽元。
- favicon: 添加特定的 favicon 路徑到輸出的 HTML 文件中敛纲。
- minify: {} | false , 傳遞 html-minifier 選項(xiàng)給 minify 輸出
- hash: true | false, 如果為 true, 將添加一個(gè)唯一的 webpack 編譯 hash 到所有包含的腳本和 CSS 文件，對(duì)于解除 cache 很有用剂癌。
- cache: true | false淤翔，如果為 true, 這是默認(rèn)值，僅僅在文件修改之后才會(huì)發(fā)布文件佩谷。
- showErrors: true | false, 如果為 true, 這是默認(rèn)值旁壮，錯(cuò)誤信息會(huì)寫入到 HTML 頁(yè)面中
- chunks: 允許只添加某些塊 (比如监嗜，僅僅 unit test 塊)
- chunksSortMode: 允許控制塊在添加到頁(yè)面之前的排序方式，支持的值：'none' | 'default' | {function}-default:'auto'
- excludeChunks: 允許跳過(guò)某些塊抡谐，(比如裁奇，跳過(guò)單元測(cè)試的塊)
在當(dāng)前demo根目錄下新建一個(gè)webpack.config.js的文件，首先最簡(jiǎn)單的寫一下入口文件和存放打包后文件的地方的路徑
//DEMO
module.exports = {
entry: __dirname + "/app/main.js", //唯一入口文件
output: {
path: __dirname + "/public", //打包后的文件存放地方
filename: "build.js" //打包后輸出的文件的文件名
}
}
_dirname 是node.js的一個(gè)全局變量麦撵，指向當(dāng)前執(zhí)行腳本所在的目錄
在終端里運(yùn)行webpack node_modules/.bin/webpack（非全局安裝）
那么在非全局安裝webpack中刽肠，或者是類似于上面命令很長(zhǎng)很容易出錯(cuò)的時(shí)候，我們可以用npm引導(dǎo)任務(wù)執(zhí)行免胃，在package.json中對(duì)npm腳本部分進(jìn)行設(shè)置音五，可以使用簡(jiǎn)單的npm start命令來(lái)代替：
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack" //相當(dāng)于把npm的start命令指向webpack命令
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^2.3.3"
}
}
這時(shí)候的編譯后是虛擬的，本地其實(shí)是沒(méi)有編譯的杜秸，所以很多使用本地路徑的都需要我們?nèi)ヌ幚怼?/p>
無(wú)論全局還是局部安裝的webpack放仗，這里都不需要寫前面詳細(xì)路徑，因?yàn)閜ackage.json腳本部分已經(jīng)默認(rèn)在命令中添加了node_module/.bin路徑撬碟。
devtool
生成Source Maps可以使開(kāi)發(fā)更容易诞挨。打包后的文件有時(shí)候是不容易找到錯(cuò)的地方對(duì)應(yīng)的源碼的。通過(guò)簡(jiǎn)單的配置呢蛤，webpack在打包時(shí)候會(huì)為我們生成source maps惶傻，這可以為我們提供一種對(duì)應(yīng)編譯文件和源文件的方法，使得編譯后的代碼可讀性更高其障，更容易調(diào)試银室。
| devtool選項(xiàng) | 配置結(jié)果 |
|---|---|
| source-map | 在一個(gè)單獨(dú)的文件中產(chǎn)生一個(gè)完整且功能完全的文件。這個(gè)文件具有最好的source map励翼，但是它會(huì)減慢打包文件的構(gòu)建速度蜈敢； |
| cheap-module-source-map | 在一個(gè)單獨(dú)的文件中生成一個(gè)不帶列映射的map，不帶列映射提高項(xiàng)目構(gòu)建速度汽抚，但是也是的瀏覽器開(kāi)發(fā)者工具只能對(duì)應(yīng)到具體的行抓狭，不能對(duì)應(yīng)到具體的列（符號(hào)），會(huì)對(duì)調(diào)試造成不便造烁； |
| eval-source-map | 使用eval打包源文件模塊否过，在同一個(gè)文件中生成干凈的完整的source map。這個(gè)選項(xiàng)可以在不影響構(gòu)建速度的前提下生成完整的source map惭蟋，但是對(duì)打包后輸出的js文件的執(zhí)行具有性能和安全的隱患苗桂。不過(guò)在開(kāi)發(fā)階段這是一個(gè)非常好的選項(xiàng)，但是在生產(chǎn)階段一定不要用這個(gè)選項(xiàng)告组； |
| cheap-module-eval-source-map | 這是在打包文件時(shí)最快的生成source map的方法煤伟，生成的source map會(huì)和打包后的JavaScript文件同行顯示，沒(méi)有列映射，和eval-source-map選項(xiàng)具有相似的缺點(diǎn) |
在webpack中配置source maps需要配置devtool持偏，它共有四種不同的配置選項(xiàng)驼卖，優(yōu)缺點(diǎn)描述如下：
| devtool選項(xiàng) | 配置結(jié)果 |
|---|---|
| source-map | 在一個(gè)單獨(dú)的文件中產(chǎn)生一個(gè)完整且功能完全的文件氨肌。這個(gè)文件具有最好的source map鸿秆，但是它會(huì)減慢打包文件的構(gòu)建速度； |
| cheap-module-source-map | 在一個(gè)單獨(dú)的文件中生成一個(gè)不帶列映射的map怎囚，不帶列映射提高項(xiàng)目構(gòu)建速度卿叽，但是也是的瀏覽器開(kāi)發(fā)者工具只能對(duì)應(yīng)到具體的行，不能對(duì)應(yīng)到具體的列（符號(hào)）恳守，會(huì)對(duì)調(diào)試造成不便考婴； |
| eval-source-map | 使用eval打包源文件模塊，在同一個(gè)文件中生成干凈的完整的source map催烘。這個(gè)選項(xiàng)可以在不影響構(gòu)建速度的前提下生成完整的source map沥阱，但是對(duì)打包后輸出的js文件的執(zhí)行具有性能和安全的隱患。不過(guò)在開(kāi)發(fā)階段這是一個(gè)非常好的選項(xiàng)伊群，但是在生產(chǎn)階段一定不要用這個(gè)選項(xiàng)考杉； |
| cheap-module-eval-source-map | 這是在打包文件時(shí)最快的生成source map的方法，生成的source map會(huì)和打包后的JavaScript文件同行顯示舰始，沒(méi)有列映射崇棠，和eval-source-map選項(xiàng)具有相似的缺點(diǎn) |
接下來(lái)生成Source Maps這可以使調(diào)試更加的容易，因?yàn)檫@只是一個(gè)測(cè)試的小項(xiàng)目丸卷，所以推薦使用eval-source-map枕稀，不過(guò)只是在開(kāi)發(fā)階段使用。
//DEMO
module.exports = {
devtool: 'eval-source-map',//配置生成Source Maps谜嫉，選擇合適的選項(xiàng)
entry: __dirname + "/app/main.js", //唯一入口文件
output: {
path: __dirname + "/public", //打包后的文件存放地方
filename: "build.js" //打包后輸出的文件的文件名
}
}
使用webpack構(gòu)建本地服務(wù)器
webpack可以提供一個(gè)可選的本地開(kāi)發(fā)服務(wù)器萎坷，該服務(wù)器是基于node.js構(gòu)建，不過(guò)它是一個(gè)單獨(dú)的組件（webpack-dev-server是一個(gè)獨(dú)立的NPM包）沐兰，在webpack中進(jìn)行配置之前需要單獨(dú)安裝它作為項(xiàng)目依賴哆档。這一步搞好了，嗯哼~你的瀏覽器就可以監(jiān)測(cè)你代碼的修改然后自動(dòng)刷新了僧鲁。
npm install --save-dev webpack-dev-server
接下來(lái)我們調(diào)整一下配置文件：
module.exports = {
devtool: 'eval-source-map',//配置生成Source Maps虐呻，選擇合適的選項(xiàng)
entry: __dirname + "/app/main.js", //唯一入口文件
output: {
path: __dirname + "/public", //打包后的文件存放地方
publicPath:"/assets/", //運(yùn)行后你看不到，因?yàn)閷?shí)時(shí)編譯是保存到了內(nèi)存中
filename: "build.js" //打包后輸出的文件的文件名
}
}
調(diào)整一下index.html的js引用路徑 <script src="assets/build.js"></script>
運(yùn)行webpack-dev-server --content-base ./public得到如下（這里如果不進(jìn)行設(shè)定的話寞秃，默認(rèn)是當(dāng)前目錄下的）：
打開(kāi)瀏覽器輸入：localhost:8080 你就能看到你的hello信息了....
對(duì)上面設(shè)定的content-base做一些說(shuō)明：
注意：如果在webpack.config.js里面如果配置了output的publicPath這個(gè)字段的值的話斟叼，在index.html文件里面也應(yīng)該做出調(diào)整，因此才需要調(diào)整index.html春寿。上述配置了這個(gè)字段是為了對(duì)實(shí)時(shí)編譯保存到內(nèi)存中做一個(gè)說(shuō)明朗涩，你也可以省略這個(gè)字段，那么index.html的js引用路徑就依然是<script src="build.js"></script>
有同學(xué)要說(shuō)绑改，坑爹啊谢床，我想要的是實(shí)時(shí)編譯兄一，實(shí)時(shí)刷新，瀏覽器自刷新识腿。你這個(gè)是手動(dòng)的什么鬼出革？？
webpack-dev-server目前支持兩種自動(dòng)刷新的方式：
- iframe mode
- inline mode
這2種模式的配置方式和訪問(wèn)路徑稍微有點(diǎn)區(qū)別渡讼，最主要的區(qū)別是：Iframe mode是在網(wǎng)頁(yè)中嵌入了一個(gè)iframe骂束，將我們自己的應(yīng)用注入到這個(gè)iframe中，因此你每次修改的文件都是對(duì)這個(gè)iframe進(jìn)行了reload成箫。而inline mode是webpack-dev-server會(huì)在wenpack.config.js的入口配置文件中再添加一個(gè)入口展箱。
module.exports = {
devtool: 'eval-source-map',//配置生成Source Maps，選擇合適的選項(xiàng)
entry: {
app: [
'webpack-dev-derver/client?http://localhost:8080/',
__dirname + "/app/main.js", //唯一入口文件
]
},
output: {
path: __dirname + "/public", //打包后的文件存放地方
filename: "build.js" //打包后輸出的文件的文件名
}
}
你也可以直接在index.html中引入這部分代碼：<script src="http://localhost:8080/webpack-dev-server.js"></script>
Iframe mode
瀏覽器訪問(wèn)路徑變?yōu)椋?code>localhost:8080/webpack-dev-server/index.html
頁(yè)面的header部分會(huì)出現(xiàn)整個(gè)reload消息的狀態(tài)蹬昌，當(dāng)改變?cè)次募r(shí)候混驰，就可以自動(dòng)完成編譯打包，頁(yè)面自動(dòng)刷新皂贩。
Inline code
使用時(shí)候栖榨，cmd line需要寫成webpack-dev-server --inline --content-base ./public
瀏覽器訪問(wèn)路徑是：localhost:8080/index.html
它會(huì)在控制臺(tái)中顯示reload狀態(tài)，也具有自動(dòng)編譯打包的功能先紫。
hot module replacement
開(kāi)啟hot module replacement 功能治泥，在cmd line里面添加 --hot就可以
webpack-dev-derver --hot --inline --content-base ./public
其它的配置項(xiàng)比如：
- quiet 控制臺(tái)中不輸出打包信息
- compress 開(kāi)啟gzip壓縮
- propress 顯示打包的進(jìn)度
調(diào)整package.json里面的配置項(xiàng)
"scripts": {
"dev": "webpack-dev-server --devtool eval-source-map --progress --colors --hot --inline --content-base ./public",
"build": "webpack --progress --colors"
}
接下來(lái)就可以使用npm run dev 在瀏覽器中打開(kāi)localhost:8080/index.html 進(jìn)行愉快開(kāi)發(fā)了
備注一下devserver配置選項(xiàng)
| devserver配置選項(xiàng) | 描述 |
|---|---|
| contentBase | 默認(rèn)webpack-dev-server會(huì)為根文件夾提供本地服務(wù)器，如果想為另外一個(gè)目錄下的文件提供本地服務(wù)器遮精，應(yīng)該在這里設(shè)置其所在的目錄（比如DEMO中的“public”目錄） |
| port | 設(shè)置默認(rèn)監(jiān)聽(tīng)端口居夹，默認(rèn)為“8080” |
| inline | 設(shè)置為true，當(dāng)源文件改變時(shí)本冲，會(huì)自動(dòng)刷新頁(yè)面 |
| colors | 設(shè)置為true准脂，終端輸出的文件為彩色的 |
| historyApiFallback | 開(kāi)發(fā)單頁(yè)面應(yīng)用時(shí)非常有用，它依賴于HTML5 history API檬洞，如果設(shè)置為true狸膏，所有的跳轉(zhuǎn)將指向index.html |
module-loaders
loaders中對(duì)我來(lái)說(shuō)最難的是babel，我看著大神的教程N(yùn)久沒(méi)折騰出來(lái)添怔，就為了體驗(yàn)把ES6湾戳，也是拼了。
按照大神的教程广料，繼續(xù)....希望這次折騰成功 come on baby
首先明確大名鼎鼎的loaders在webpack中為啥是個(gè)很犀利的功能砾脑。主要就是通過(guò)使用不同的loader，webpack可以通過(guò)調(diào)用外部的腳本或工具艾杏，對(duì)各種格式的文件進(jìn)行處理韧衣。比如分析JSON文件把它轉(zhuǎn)換為JS文件俭茧，或者是ES6/ES7轉(zhuǎn)換為現(xiàn)代瀏覽器可以識(shí)別的JS文件慕爬。還可以將react的jsx文件轉(zhuǎn)換成JS文件扑庞。厲害了我的loader....
loaders需要單獨(dú)安裝
npm install --save-dev json-loader
安裝成功后需要在webpack.config.js下的module關(guān)鍵字下進(jìn)行配置兵琳，配置項(xiàng)如下：
- test： 一個(gè)匹配loaders處理的文件的拓展名的正則表達(dá)式（必寫）
- loader： loader的名稱（必寫）
- include/exclude： 手動(dòng)添加必須處理的文件（文件夾）/屏蔽不需要處理的文件（文件夾）（非必寫）
- query： 為loaders提供額外的設(shè)置選項(xiàng)（非必寫）
webpack.config.js
module.exports = {
devtool: 'eval-source-map',//配置生成Source Maps，選擇合適的選項(xiàng)
entry: {
app: [
__dirname + "/app/main.js", //唯一入口文件
]
},
output: {
path: __dirname + "/public", //打包后的文件存放地方
filename: "build.js" //打包后輸出的文件的文件名
},
module: { //配置文件里添加json loader
loaders: [
{
test: /\.json$/,
loader: "json-loader"
}
]
},
}
DEMO繼續(xù)硕噩，把a(bǔ)pp.js的message單獨(dú)放在一個(gè)message.json文件里假残，再進(jìn)行配置，讓app.js可以讀取到j(luò)son中的message榴徐。
message.json
{
"hello": "Hello everybody and from json file!"
}
app.js
// app.js
var message = require('./message.json');
module.exports = function() {
var hello = document.createElement('div');
hello.textContent = message.hello;
return hello;
};
嗯哼守问，走你~~
這個(gè)是簡(jiǎn)單的了匀归。接下來(lái)是我有愛(ài)有恨的babel
Babel其實(shí)是一個(gè)編譯JavaScript的平臺(tái)坑资，強(qiáng)大之處就是：ES6/ES7轉(zhuǎn)換為現(xiàn)代瀏覽器可以識(shí)別的JS文件。還可以將react的jsx文件轉(zhuǎn)換成JS文件穆端，簡(jiǎn)直占據(jù)了目前我的loader的半壁江山啊袱贮。
Babel其實(shí)就是幾個(gè)模塊化的包，核心功能位于babel-core的npm包中体啰，不過(guò)webpack把它們整合在一起使用了攒巍，但是對(duì)于每一個(gè)你需要的功能或者拓展，你都需要安裝單獨(dú)的包（比如解析Es6的babel-preset-es2015和解析JSX的babel-preset-react包）
我們來(lái)個(gè)全家桶一次搞定：
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react（npm一次性安裝多個(gè)依賴模塊荒勇，模塊之間用空格隔開(kāi)）
配置webpack.config.js:
module.exports = {
devtool: 'eval-source-map',//配置生成Source Maps柒莉，選擇合適的選項(xiàng)
entry: {
app: [
__dirname + "/app/main.js", //唯一入口文件
]
},
output: {
path: __dirname + "/public", //打包后的文件存放地方
filename: "build.js" //打包后輸出的文件的文件名
},
module: { //配置文件里添加json loader
loaders: [
{
test: /\.json$/,
loader: "json-loader"
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
因?yàn)閐emo會(huì)用的react所以記得安裝react和react-dom
npm install --save react react-dom
在app.js里使用es6新語(yǔ)法開(kāi)始愉快的返回一個(gè)react組件試一下吧
import React, {Component} from 'react'
import message from './message.json'
class Hello extends Component {
render() {
return (
<div>
{message.hello}
</div>
);
}
}
export default Hello
在main.js使用ES6的模塊定義和渲染Hello模塊
import React from 'react';
import {render} from 'react-dom';
import Hello from './app.js';
render(<Hello />, document.getElementById("test"));
考慮到babel有非常多的配置選項(xiàng)，在webpack.config.js里面進(jìn)行配置的話會(huì)顯得太復(fù)雜沽翔，因此比較好的方式是把babel的配置選項(xiàng)單獨(dú)放在一個(gè).babelrc的配置文件中兢孝。webpack會(huì)自動(dòng)調(diào)用這個(gè)配置文件的選項(xiàng)。因此我們將剛才的配置分離出來(lái)到.babelrc:
{
"presets": ["react", "es2015"]
}
穿插點(diǎn)題外的仅偎。webpack對(duì)于模塊有非常強(qiáng)大的處理功能跨蟹，那么什么算是模塊呢？橘沥？
事實(shí)上一切皆模塊窗轩，包括我們的css、fonts座咆、圖片痢艺、js等，當(dāng)通過(guò)合適的loaders時(shí)介陶，它們都可以被當(dāng)成模塊來(lái)處理堤舒。
CSS
webpack提供了兩個(gè)工具處理樣式表，css-loader和style-loader斤蔓，這兩個(gè)處理的任務(wù)不同植酥。css-loader使你能夠以類似@import 或者 url（...） 這種方式實(shí)現(xiàn) require（）的功能，style-loader是將所有計(jì)算后的樣式加入頁(yè)面中，兩者組合在一起就能使樣式表嵌入webpack打包后的js文件中友驮。
DEMO繼續(xù)：
npm install --save-dev style-loader css-loader
webpack.config.js中添加配置：
{
test: /\.css$/,
loader: 'style-loader!css-loader'//添加對(duì)樣式表的處理
}
感嘆號(hào)的作用在于使同一文件能夠使用不同類型的loader
在app文件夾創(chuàng)建一個(gè)main.css文件漂羊，寫點(diǎn)樣式
html {
box-sizing: border-box;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: 0;
font-family: '微軟雅黑', Helvetica, Arial, sans-serif;
background: #f2f2f2;
}
h1, h2, h3, h4, h5, h6, p, ul {
margin: 0;
padding: 0;
}
webpack只有單一入口，其它的模塊需要通過(guò)import卸留、require走越、url等導(dǎo)入相關(guān)位置，現(xiàn)在將main.css導(dǎo)入main.js中
import React from 'react';
import {render} from 'react-dom';
import Hello from './app.js';
import './main.css';
render(<Hello />, document.getElementById("test"));
通常情況下耻瑟，css會(huì)和js打包到同一個(gè)文件中旨指，并不會(huì)打包一個(gè)單獨(dú)的css文件，通過(guò)合適的配置webpack的話也可以把css打包為單獨(dú)的文件的喳整。
CSS module
隨著前端模塊化開(kāi)發(fā)的推動(dòng)谆构，css module出現(xiàn)了。它將js的模塊化思想帶入css中來(lái)框都，通過(guò)css模塊搬素，所有的類名、動(dòng)畫名默認(rèn)都只作用于當(dāng)前模塊魏保。webpack一開(kāi)始就對(duì)css模塊化提供了支持熬尺，在css loader中進(jìn)行配置后，你所需要做的就是把modules傳遞到需要的地方谓罗，然后就可以直接把css的類名傳遞到組件的代碼中粱哼，且只對(duì)當(dāng)前組件有效，不比擔(dān)心在不同的模塊中具有相同的類名可能會(huì)造成的問(wèn)題檩咱，實(shí)現(xiàn)方式先調(diào)整webpack.config.js中的css配置
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules' //跟前面相比就在后面加上了?modules
}
創(chuàng)建一個(gè)app.js文件
#test {
background-color: pink;
padding: 10px;
border: 5px solid green;
}
導(dǎo)入#test 到app.js中
import React, {Component} from 'react';
import message from './message.json';
import styles from './app.css';
class Hello extends Component {
render() {
return (
<div className={styles.test}>
{message.hello}
</div>
);
}
}
export default Hello
相同的類名也不會(huì)造成不同組件之間的污染..
css modules是一個(gè)很大的主題揭措，可以參考cssModules官方文檔查看更多
css預(yù)處理器
Sass和Less之類的預(yù)處理器是對(duì)原生css的拓展，它們?cè)试S你使用類似于variables,nesting,mixins,inheritance等不存在于css中的特性來(lái)寫css税手，css預(yù)處理器可以使這些特殊的語(yǔ)句轉(zhuǎn)化為瀏覽器可以識(shí)別的css語(yǔ)句蜂筹。
常用的loaders：
- Less Loader
- Sass Loader
- Stylus Loader
還有一個(gè)css的處理平臺(tái)-PostCss，具體可以參考PostCss官方文檔
安裝postcss和autoprefixer（自動(dòng)添加前綴的插件）可以參考autoprefixer官方文檔
npm install --save-dev postcss-loader autoprefixer
新建一個(gè)postcss.config.js文件芦倒，并在里面申明依賴的插件
module.exports = {
plugins: [
require ('autoprefixer')
]
}
webpack.config.js 如下現(xiàn)在你寫的css會(huì)自動(dòng)根據(jù)can i use 里的數(shù)據(jù)添加不同的前綴了艺挪。
module.exports = {
devtool: 'eval-source-map',//配置生成Source Maps，選擇合適的選項(xiàng)
entry: {
app: [
__dirname + "/app/main.js", //唯一入口文件
]
},
output: {
path: __dirname + "/public", //打包后的文件存放地方
filename: "build.js" //打包后輸出的文件的文件名
},
module: { //配置文件里添加json loader
loaders: [
{
test: /\.json$/,
loader: "json-loader"
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules!postcss-loader'
}
]
}
}
插件（plugins）
loaders是在打包構(gòu)建過(guò)程中用來(lái)處理源文件的（JSX兵扬，Scss麻裳，Less...），一次處理一個(gè)器钟，插件并不直接操作單個(gè)文件津坑，它直接對(duì)整個(gè)構(gòu)建過(guò)程其作用。
webpack分為內(nèi)置插件和第三方插件傲霸。在筆記二中對(duì)這兩者有基礎(chǔ)介紹疆瑰。下一節(jié)筆記就正式開(kāi)始參考官方進(jìn)行vue的漸進(jìn)學(xué)習(xí)眉反。
更多文章請(qǐng)移步 http://www.yuki.kim
