webpack配置DEMO
webpack.config.js文件官方標(biāo)配示例如下：
module.exports = {
dvtool: //配置生成Source Maps，選擇合適的選項
plugins: //插件項
entry: //頁面入口文件配置
output: //入口文件輸出配置
path: //定義輸出文件路徑
filename: //指定打包文件名稱
module: //加載器配置,對模塊的處理邏輯
loaders: //定義了一些列的加載器
test: //正則，匹配到文件的后綴名
loader/loaders: //處理匹配到的文件----注意現(xiàn)在要求loader關(guān)鍵字不準(zhǔn)省略"-loader"后綴
include: //包含的文件夾
exclude: //排除的文件夾
resolve: //其它解決方案的配置
extensions: //自動補全識別后綴
}
參考各路大神的流程寫下來.....應(yīng)該沒有漏掉哪一步吧？
DEMO 項目結(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一會打包完成的js -->
<script src="build.js"></script>
</html>
app.js（返回包含問候信息的html元素）
// app.js
module.exports = function() {
var hello = document.createElement('div');
hello.textContent = "Hello Everybody!";
return hello;
};
main.js（把app.js返回的節(jié)點插入頁面）
//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
打開index.html
這里推薦通過配置文件來使用webpack
entry和output
在webpack.config.js中entry是唯一入口文件
首先entry的值可以有三種類型：1、字符串；2、數(shù)組；3、對象
//與DEMO無關(guān)，此為示例說明文件
//字符串，指定從這個文件路徑下面的文件作為打包的入口文件
entry: './src/js/main.js' , //唯一入口文件
output: {
path: 'dist/js', //打包后的文件存放地方
filename: "build.js" //文件名
}
//存在多個入口時，可以使用array的方式。會將里面的文件一起打包到build.js
{
entry: ['./src/js/main.js', './src/js/test_entry.js'],
output: {
path: 'dist/js',
filename: "build.js"
}
}
//也可以是一個對象
{
entry： {
main: './src/js/main.js',
test_entry: './src/js/test_entry.js'
},
output: {
path: 'dist/js',
filename: '[name]-[chunkhash].js' //[name]的值是entry的鍵值，[hash]是打包時候的hash值，chunkhash是md5加密的值，這里作為版本號使用
}
}
每次修改文件，運行webpack后都會生成不一樣的hash和chunkhash值，方便上線時候靜態(tài)資源的版本管理。
因為文件名每次運行都是變化的，文件引入的文件名字也是需要變化的，這時候使用html-webpack-plugin插件 npm install html-webpack-plugin --save-dev
完成后在wenpack.config.js文件里添加plugins（plugins）的值是數(shù)組，里面的值都是new htmlWebpackPlugin()，參數(shù)見下文；
最后文件如下：
//與DEMO無關(guān)，此為示例說明文件
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]是打包時候的hash值，chunkhash是md5加密的值，這里作為版本號使用
},
plugins: [
new htmlWebpackPlugin({
title: 'webpack demo',
filename: 'index-[hash].html',
template: 'index.html'
})
]
}
- title: 用來生成頁面的 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 選項給 minify 輸出
- hash: true | false, 如果為 true, 將添加一個唯一的 webpack 編譯 hash 到所有包含的腳本和 CSS 文件，對于解除 cache 很有用。
- cache: true | false，如果為 true, 這是默認(rèn)值，僅僅在文件修改之后才會發(fā)布文件。
- showErrors: true | false, 如果為 true, 這是默認(rèn)值，錯誤信息會寫入到 HTML 頁面中
- chunks: 允許只添加某些塊 (比如，僅僅 unit test 塊)
- chunksSortMode: 允許控制塊在添加到頁面之前的排序方式，支持的值：'none' | 'default' | {function}-default:'auto'
- excludeChunks: 允許跳過某些塊，(比如，跳過單元測試的塊)
在當(dāng)前demo根目錄下新建一個webpack.config.js的文件，首先最簡單的寫一下入口文件和存放打包后文件的地方的路徑
//DEMO
module.exports = {
entry: __dirname + "/app/main.js", //唯一入口文件
output: {
path: __dirname + "/public", //打包后的文件存放地方
filename: "build.js" //打包后輸出的文件的文件名
}
}
_dirname 是node.js的一個全局變量，指向當(dāng)前執(zhí)行腳本所在的目錄
在終端里運行webpack node_modules/.bin/webpack（非全局安裝）
那么在非全局安裝webpack中，或者是類似于上面命令很長很容易出錯的時候，我們可以用npm引導(dǎo)任務(wù)執(zhí)行，在package.json中對npm腳本部分進行設(shè)置，可以使用簡單的npm start命令來代替：
{
"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"
}
}
這時候的編譯后是虛擬的，本地其實是沒有編譯的，所以很多使用本地路徑的都需要我們?nèi)ヌ幚怼?/p>
無論全局還是局部安裝的webpack，這里都不需要寫前面詳細路徑，因為package.json腳本部分已經(jīng)默認(rèn)在命令中添加了node_module/.bin路徑。
devtool
生成Source Maps可以使開發(fā)更容易。打包后的文件有時候是不容易找到錯的地方對應(yīng)的源碼的。通過簡單的配置，webpack在打包時候會為我們生成source maps，這可以為我們提供一種對應(yīng)編譯文件和源文件的方法，使得編譯后的代碼可讀性更高，更容易調(diào)試。
| devtool選項 | 配置結(jié)果 |
|---|---|
| source-map | 在一個單獨的文件中產(chǎn)生一個完整且功能完全的文件。這個文件具有最好的source map，但是它會減慢打包文件的構(gòu)建速度； |
| cheap-module-source-map | 在一個單獨的文件中生成一個不帶列映射的map，不帶列映射提高項目構(gòu)建速度，但是也是的瀏覽器開發(fā)者工具只能對應(yīng)到具體的行，不能對應(yīng)到具體的列（符號），會對調(diào)試造成不便； |
| eval-source-map | 使用eval打包源文件模塊，在同一個文件中生成干凈的完整的source map。這個選項可以在不影響構(gòu)建速度的前提下生成完整的source map，但是對打包后輸出的js文件的執(zhí)行具有性能和安全的隱患。不過在開發(fā)階段這是一個非常好的選項，但是在生產(chǎn)階段一定不要用這個選項； |
| cheap-module-eval-source-map | 這是在打包文件時最快的生成source map的方法，生成的source map會和打包后的JavaScript文件同行顯示，沒有列映射，和eval-source-map選項具有相似的缺點 |
在webpack中配置source maps需要配置devtool，它共有四種不同的配置選項，優(yōu)缺點描述如下：
| devtool選項 | 配置結(jié)果 |
|---|---|
| source-map | 在一個單獨的文件中產(chǎn)生一個完整且功能完全的文件。這個文件具有最好的source map，但是它會減慢打包文件的構(gòu)建速度； |
| cheap-module-source-map | 在一個單獨的文件中生成一個不帶列映射的map，不帶列映射提高項目構(gòu)建速度，但是也是的瀏覽器開發(fā)者工具只能對應(yīng)到具體的行，不能對應(yīng)到具體的列（符號），會對調(diào)試造成不便； |
| eval-source-map | 使用eval打包源文件模塊，在同一個文件中生成干凈的完整的source map。這個選項可以在不影響構(gòu)建速度的前提下生成完整的source map，但是對打包后輸出的js文件的執(zhí)行具有性能和安全的隱患。不過在開發(fā)階段這是一個非常好的選項，但是在生產(chǎn)階段一定不要用這個選項； |
| cheap-module-eval-source-map | 這是在打包文件時最快的生成source map的方法，生成的source map會和打包后的JavaScript文件同行顯示，沒有列映射，和eval-source-map選項具有相似的缺點 |
接下來生成Source Maps這可以使調(diào)試更加的容易，因為這只是一個測試的小項目，所以推薦使用eval-source-map，不過只是在開發(fā)階段使用。
//DEMO
module.exports = {
devtool: 'eval-source-map',//配置生成Source Maps，選擇合適的選項
entry: __dirname + "/app/main.js", //唯一入口文件
output: {
path: __dirname + "/public", //打包后的文件存放地方
filename: "build.js" //打包后輸出的文件的文件名
}
}
使用webpack構(gòu)建本地服務(wù)器
webpack可以提供一個可選的本地開發(fā)服務(wù)器，該服務(wù)器是基于node.js構(gòu)建，不過它是一個單獨的組件（webpack-dev-server是一個獨立的NPM包），在webpack中進行配置之前需要單獨安裝它作為項目依賴。這一步搞好了，嗯哼~你的瀏覽器就可以監(jiān)測你代碼的修改然后自動刷新了。
npm install --save-dev webpack-dev-server
接下來我們調(diào)整一下配置文件：
module.exports = {
devtool: 'eval-source-map',//配置生成Source Maps，選擇合適的選項
entry: __dirname + "/app/main.js", //唯一入口文件
output: {
path: __dirname + "/public", //打包后的文件存放地方
publicPath:"/assets/", //運行后你看不到，因為實時編譯是保存到了內(nèi)存中
filename: "build.js" //打包后輸出的文件的文件名
}
}
調(diào)整一下index.html的js引用路徑 <script src="assets/build.js"></script>
運行webpack-dev-server --content-base ./public得到如下（這里如果不進行設(shè)定的話，默認(rèn)是當(dāng)前目錄下的）：
打開瀏覽器輸入：localhost:8080 你就能看到你的hello信息了....
對上面設(shè)定的content-base做一些說明：
注意：如果在webpack.config.js里面如果配置了output的publicPath這個字段的值的話，在index.html文件里面也應(yīng)該做出調(diào)整，因此才需要調(diào)整index.html。上述配置了這個字段是為了對實時編譯保存到內(nèi)存中做一個說明，你也可以省略這個字段，那么index.html的js引用路徑就依然是<script src="build.js"></script>
有同學(xué)要說，坑爹啊，我想要的是實時編譯，實時刷新，瀏覽器自刷新。你這個是手動的什么鬼？？
webpack-dev-server目前支持兩種自動刷新的方式：
- iframe mode
- inline mode
這2種模式的配置方式和訪問路徑稍微有點區(qū)別，最主要的區(qū)別是：Iframe mode是在網(wǎng)頁中嵌入了一個iframe，將我們自己的應(yīng)用注入到這個iframe中，因此你每次修改的文件都是對這個iframe進行了reload。而inline mode是webpack-dev-server會在wenpack.config.js的入口配置文件中再添加一個入口。
module.exports = {
devtool: 'eval-source-map',//配置生成Source Maps，選擇合適的選項
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
瀏覽器訪問路徑變?yōu)椋?code>localhost:8080/webpack-dev-server/index.html
頁面的header部分會出現(xiàn)整個reload消息的狀態(tài)，當(dāng)改變源文件時候，就可以自動完成編譯打包，頁面自動刷新。
Inline code
使用時候，cmd line需要寫成webpack-dev-server --inline --content-base ./public
瀏覽器訪問路徑是：localhost:8080/index.html
它會在控制臺中顯示reload狀態(tài)，也具有自動編譯打包的功能。
hot module replacement
開啟hot module replacement 功能，在cmd line里面添加 --hot就可以
webpack-dev-derver --hot --inline --content-base ./public
其它的配置項比如：
- quiet 控制臺中不輸出打包信息
- compress 開啟gzip壓縮
- propress 顯示打包的進度
調(diào)整package.json里面的配置項
"scripts": {
"dev": "webpack-dev-server --devtool eval-source-map --progress --colors --hot --inline --content-base ./public",
"build": "webpack --progress --colors"
}
接下來就可以使用npm run dev 在瀏覽器中打開localhost:8080/index.html 進行愉快開發(fā)了
備注一下devserver配置選項
| devserver配置選項 | 描述 |
|---|---|
| contentBase | 默認(rèn)webpack-dev-server會為根文件夾提供本地服務(wù)器，如果想為另外一個目錄下的文件提供本地服務(wù)器，應(yīng)該在這里設(shè)置其所在的目錄（比如DEMO中的“public”目錄） |
| port | 設(shè)置默認(rèn)監(jiān)聽端口，默認(rèn)為“8080” |
| inline | 設(shè)置為true，當(dāng)源文件改變時，會自動刷新頁面 |
| colors | 設(shè)置為true，終端輸出的文件為彩色的 |
| historyApiFallback | 開發(fā)單頁面應(yīng)用時非常有用，它依賴于HTML5 history API，如果設(shè)置為true，所有的跳轉(zhuǎn)將指向index.html |
module-loaders
loaders中對我來說最難的是babel，我看著大神的教程N久沒折騰出來，就為了體驗把ES6，也是拼了。
按照大神的教程，繼續(xù)....希望這次折騰成功 come on baby
首先明確大名鼎鼎的loaders在webpack中為啥是個很犀利的功能。主要就是通過使用不同的loader，webpack可以通過調(diào)用外部的腳本或工具，對各種格式的文件進行處理。比如分析JSON文件把它轉(zhuǎn)換為JS文件，或者是ES6/ES7轉(zhuǎn)換為現(xiàn)代瀏覽器可以識別的JS文件。還可以將react的jsx文件轉(zhuǎn)換成JS文件。厲害了我的loader....
loaders需要單獨安裝
npm install --save-dev json-loader
安裝成功后需要在webpack.config.js下的module關(guān)鍵字下進行配置，配置項如下：
- test： 一個匹配loaders處理的文件的拓展名的正則表達式（必寫）
- loader： loader的名稱（必寫）
- include/exclude： 手動添加必須處理的文件（文件夾）/屏蔽不需要處理的文件（文件夾）（非必寫）
- query： 為loaders提供額外的設(shè)置選項（非必寫）
webpack.config.js
module.exports = {
devtool: 'eval-source-map',//配置生成Source Maps，選擇合適的選項
entry: {
app: [
__dirname + "/app/main.js", //唯一入口文件
]
},
output: {
path: __dirname + "/public", //打包后的文件存放地方
filename: "build.js" //打包后輸出的文件的文件名
},
module: { //配置文件里添加json loader
loaders: [
{
test: /\.json$/,
loader: "json-loader"
}
]
},
}
DEMO繼續(xù)，把app.js的message單獨放在一個message.json文件里，再進行配置，讓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;
};
嗯哼，走你~~
這個是簡單的了。接下來是我有愛有恨的babel
Babel其實是一個編譯JavaScript的平臺，強大之處就是：ES6/ES7轉(zhuǎn)換為現(xiàn)代瀏覽器可以識別的JS文件。還可以將react的jsx文件轉(zhuǎn)換成JS文件，簡直占據(jù)了目前我的loader的半壁江山啊。
Babel其實就是幾個模塊化的包，核心功能位于babel-core的npm包中，不過webpack把它們整合在一起使用了，但是對于每一個你需要的功能或者拓展，你都需要安裝單獨的包（比如解析Es6的babel-preset-es2015和解析JSX的babel-preset-react包）
我們來個全家桶一次搞定：
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react（npm一次性安裝多個依賴模塊，模塊之間用空格隔開）
配置webpack.config.js:
module.exports = {
devtool: 'eval-source-map',//配置生成Source Maps，選擇合適的選項
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']
}
}
]
}
}
因為demo會用的react所以記得安裝react和react-dom
npm install --save react react-dom
在app.js里使用es6新語法開始愉快的返回一個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有非常多的配置選項，在webpack.config.js里面進行配置的話會顯得太復(fù)雜，因此比較好的方式是把babel的配置選項單獨放在一個.babelrc的配置文件中。webpack會自動調(diào)用這個配置文件的選項。因此我們將剛才的配置分離出來到.babelrc:
{
"presets": ["react", "es2015"]
}
穿插點題外的。webpack對于模塊有非常強大的處理功能，那么什么算是模塊呢？？
事實上一切皆模塊，包括我們的css、fonts、圖片、js等，當(dāng)通過合適的loaders時，它們都可以被當(dāng)成模塊來處理。
CSS
webpack提供了兩個工具處理樣式表，css-loader和style-loader，這兩個處理的任務(wù)不同。css-loader使你能夠以類似@import 或者 url（...） 這種方式實現(xiàn) require（）的功能，style-loader是將所有計算后的樣式加入頁面中，兩者組合在一起就能使樣式表嵌入webpack打包后的js文件中。
DEMO繼續(xù)：
npm install --save-dev style-loader css-loader
webpack.config.js中添加配置：
{
test: /\.css$/,
loader: 'style-loader!css-loader'//添加對樣式表的處理
}
感嘆號的作用在于使同一文件能夠使用不同類型的loader
在app文件夾創(chuàng)建一個main.css文件，寫點樣式
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只有單一入口，其它的模塊需要通過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會和js打包到同一個文件中，并不會打包一個單獨的css文件，通過合適的配置webpack的話也可以把css打包為單獨的文件的。
CSS module
隨著前端模塊化開發(fā)的推動，css module出現(xiàn)了。它將js的模塊化思想帶入css中來，通過css模塊，所有的類名、動畫名默認(rèn)都只作用于當(dāng)前模塊。webpack一開始就對css模塊化提供了支持，在css loader中進行配置后，你所需要做的就是把modules傳遞到需要的地方，然后就可以直接把css的類名傳遞到組件的代碼中，且只對當(dāng)前組件有效，不比擔(dān)心在不同的模塊中具有相同的類名可能會造成的問題，實現(xiàn)方式先調(diào)整webpack.config.js中的css配置
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules' //跟前面相比就在后面加上了?modules
}
創(chuàng)建一個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
相同的類名也不會造成不同組件之間的污染..
css modules是一個很大的主題，可以參考cssModules官方文檔查看更多
css預(yù)處理器
Sass和Less之類的預(yù)處理器是對原生css的拓展，它們允許你使用類似于variables,nesting,mixins,inheritance等不存在于css中的特性來寫css，css預(yù)處理器可以使這些特殊的語句轉(zhuǎn)化為瀏覽器可以識別的css語句。
常用的loaders：
- Less Loader
- Sass Loader
- Stylus Loader
還有一個css的處理平臺-PostCss，具體可以參考PostCss官方文檔
安裝postcss和autoprefixer（自動添加前綴的插件）可以參考autoprefixer官方文檔
npm install --save-dev postcss-loader autoprefixer
新建一個postcss.config.js文件，并在里面申明依賴的插件
module.exports = {
plugins: [
require ('autoprefixer')
]
}
webpack.config.js 如下現(xiàn)在你寫的css會自動根據(jù)can i use 里的數(shù)據(jù)添加不同的前綴了。
module.exports = {
devtool: 'eval-source-map',//配置生成Source Maps，選擇合適的選項
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)建過程中用來處理源文件的（JSX，Scss，Less...），一次處理一個，插件并不直接操作單個文件，它直接對整個構(gòu)建過程其作用。
webpack分為內(nèi)置插件和第三方插件。在筆記二中對這兩者有基礎(chǔ)介紹。下一節(jié)筆記就正式開始參考官方進行vue的漸進學(xué)習(xí)。
更多文章請移步 http://www.yuki.kim
