webpack介紹和使用
一嚎莉、webpack介紹
1关拒、由來(lái)
由于前端之前js、css蝉揍、圖片文件需要單獨(dú)進(jìn)行壓縮和打包链峭，這樣團(tuán)隊(duì)人員處理很繁瑣，然后 Instagram 團(tuán)隊(duì)就想讓這些工作自動(dòng)化又沾，然后webpack應(yīng)運(yùn)而生弊仪。
2、介紹
webpack是一個(gè)模塊打包器（module bundler）杖刷，webpack視HTML励饵，JS，CSS滑燃，圖片等文件都是一種 資源 役听，每個(gè)資源文件都是一個(gè)模塊（module）文件，webpack就是根據(jù)每個(gè)模塊文件之間的依賴關(guān)系將所有的模塊打包（bundle）起來(lái)。
3典予、作用
- 對(duì) CommonJS 甜滨、 AMD 、ES6的語(yǔ)法做了兼容
- 對(duì)js瘤袖、css艳吠、圖片等資源文件都支持打包（適合團(tuán)隊(duì)化開(kāi)發(fā)）
- 比方你寫(xiě)一個(gè)js文件，另外一個(gè)人也寫(xiě)一個(gè)js文件孽椰，需要合并很麻煩昭娩，現(xiàn)在交給webpack合并很簡(jiǎn)單
- 有獨(dú)立的配置文件webpack.config.js
- 可以將代碼切割成不同的chunk，實(shí)現(xiàn)按需加載黍匾，降低了初始化時(shí)間
- 具有強(qiáng)大的Plugin（插件）接口栏渺，大多是內(nèi)部插件，使用起來(lái)比較靈活
- ……
4锐涯、拓展說(shuō)明
CommonJS磕诊、AMD、CMD是用于JavaScript模塊管理的三大規(guī)范纹腌，CommonJS定義的是模塊的同步加載霎终，是一個(gè)更偏向于服務(wù)器端的規(guī)范（也可以在瀏覽器中使用），主要用于Nodejs，根據(jù)CommonJS規(guī)范变隔，一個(gè)單獨(dú)的文件就是一個(gè)模塊肚吏，加載模塊使用
require()方法，該方法讀取一個(gè)文件并執(zhí)行广凸，最后返回文件內(nèi)部的exports對(duì)象。-
AMD和CMD則是定義模塊異步加載適用于瀏覽器端蛛枚，都是為了 JavaScript 的模塊化開(kāi)發(fā)谅海，（這里說(shuō)一下為什要有異步加載，因?yàn)闉g覽器如果使用common.js同步加載模塊的話蹦浦，就會(huì)導(dǎo)致性能等問(wèn)題扭吁，所以針對(duì)這個(gè)問(wèn)題，又出了一個(gè)規(guī)范盲镶，這個(gè)規(guī)范可以實(shí)現(xiàn)異步加載依賴模塊）
AMD規(guī)范會(huì)提前加載依賴模塊侥袜，AMD規(guī)范是通過(guò)requireJs 在推廣過(guò)程中對(duì)模塊定義的規(guī)范化產(chǎn)出。（AMD 規(guī)范：https://github.com/amdjs/amdjs-api/wiki/AMD）
-
CMD規(guī)范會(huì)延遲加載依賴模塊徒河， CMD 規(guī)范是 SeaJs 在推廣過(guò)程中對(duì)模塊定義的規(guī)范化產(chǎn)出系馆。
（CMD規(guī)范：https://github.com/seajs/seajs/issues/242）
-
AMD規(guī)范和CMD規(guī)范的區(qū)別
- 對(duì)于依賴的模塊，AMD 是提前執(zhí)行顽照，CMD 是延遲執(zhí)行由蘑。不過(guò) RequireJS 從 2.0 開(kāi)始闽寡，也改成可以延遲執(zhí)行（根據(jù)寫(xiě)法不同，處理方式不同）
- CMD 推崇依賴就近尼酿，AMD 推崇依賴前置
- AMD 的 API 默認(rèn)是一個(gè)當(dāng)多個(gè)用爷狈，CMD 的 API 嚴(yán)格區(qū)分，推崇職責(zé)單一裳擎。比如 AMD 里涎永，require 分全局 require 和局部 require，都叫 require鹿响。CMD 里羡微，沒(méi)有全局 require，而是根據(jù)模塊系統(tǒng)的完備性惶我，提供 seajs.use 來(lái)實(shí)現(xiàn)模塊系統(tǒng)的加載啟動(dòng)妈倔。CMD 里，每個(gè) API 都簡(jiǎn)單純粹
-
webpack和gulp的區(qū)別
- gulp是前端自動(dòng)化構(gòu)建工具绸贡，強(qiáng)調(diào)的是前端開(kāi)發(fā)的工作流程盯蝴，我們可以通過(guò)配置一系列的task，定義task處理的事情（代碼壓縮听怕、合并捧挺、編譯、瀏覽器實(shí)時(shí)更新等）尿瞭，然后定義執(zhí)行順序闽烙，來(lái)讓gulp執(zhí)行這些task，從而構(gòu)建項(xiàng)目的整個(gè)前端開(kāi)發(fā)流程筷厘，自動(dòng)化構(gòu)建工具并不能把所有模塊打包到一起鸣峭，也不能構(gòu)建不同模塊之間的依賴關(guān)系。
- webpack是 JavaScript 應(yīng)用程序的模塊打包器酥艳，強(qiáng)調(diào)的是一個(gè)前端模塊化方案，更側(cè)重模塊打包爬骤，我們可以把開(kāi)發(fā)中的所有資源（圖片充石、js文件、css文件等）都看成模塊霞玄，通過(guò)loader（加載器）和plugins（插件）對(duì)資源進(jìn)行處理骤铃，打包成符合生產(chǎn)環(huán)境部署的前端資源。
5坷剧、webpack整體認(rèn)知
? (1)惰爬、webpack的核心概念分為 入口(Entry)、加載器(Loader)惫企、插件(Plugins)撕瞧、出口(Output);
?
入口(Entry)：入口起點(diǎn)告訴 webpack 從哪里開(kāi)始陵叽，并根據(jù)依賴關(guān)系圖確定需要打包的文件內(nèi)容
-
加載器(Loader)：webpack 將所有的資源（css, js, image 等）都看做模塊，但是 webpack 能處理的只是 JavaScript丛版，因此巩掺，需要存在一個(gè)能將其他資源轉(zhuǎn)換為模塊，讓 webpack 能將其加入依賴樹(shù)中的東西页畦，它就是 loader胖替。loader用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換。loader 可以使你在 import 或"加載"模塊時(shí)預(yù)處理文件豫缨。因此独令，loader 類似于其他構(gòu)建工具中“任務(wù)(task)”，并提供了處理前端構(gòu)建步驟的強(qiáng)大方法好芭。
rules: [ { test: /\.(js|jsx)$/, use: 'babel-loader' } ]
-
插件(Plugins)：loader 只能針對(duì)某種特定類型的文件進(jìn)行處理燃箭，而 plugin 的功能則更為強(qiáng)大。在 plugin 中能夠介入到整個(gè) webpack 編譯的生命周期栓撞，Plugins用于解決 loader 無(wú)法實(shí)現(xiàn)的其他事情遍膜，也就是說(shuō)loader是預(yù)處理文件，那plugin 就是后處理文件瓤湘。
對(duì)loader打包后的模塊文件（bundle.js）進(jìn)行二次優(yōu)化處理瓢颅，例如：代碼壓縮從而減小文件體積
提供輔助開(kāi)發(fā)的作用：例如：熱更新（瀏覽器實(shí)時(shí)顯示）
plugins: [ new webpack.optimize.UglifyJsPlugin(), new HtmlWebpackPlugin({template: './src/index.html'}) ]
二、webpack安裝
1弛说、安裝node
使用 node -v 命令檢查版本
2挽懦、安裝cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用 cnpm -v 命令檢查版本
3、安裝nrm的兩種方法
https://www.npmjs.com/package/nrm
nrm可以幫助我們切換不同的NPM源的快捷開(kāi)關(guān)木人，可以切換的NPM源包括：npm信柿，cnpm，taobao醒第， rednpm渔嚷， npmMirror ， edunpm
第一種方法（由于是外網(wǎng)訪問(wèn)進(jìn)行安裝稠曼，可能會(huì)被墻） npm install -g nrm-
第二種方法（國(guó)內(nèi)的淘寶鏡像形病，訪問(wèn)穩(wěn)定，推薦） cnpm install -g nrm使用
nrm - V命令檢查版本(注意這里的 V 是大寫(xiě)的)- 使用
nrm ls命令可以查看當(dāng)前可以可以切換的 NPM源 - 使用
npm use cnpm命令 指定要使用的哪種NPM源
- 使用
4霞幅、安裝webpack
-
全局安裝
npm install --global webpack
-
在項(xiàng)目中安裝最新版本或特定版本漠吻，分別執(zhí)行以下命令：
npm install --save-dev webpack npm install --save-dev webpack@<version>
三、webpack配置
0司恳、搭建項(xiàng)目結(jié)構(gòu)
webpack（項(xiàng)目總目錄）
dist
-
src
-
js
-
moudle1.js
function sum(x,y){ return x + y; } // 導(dǎo)出 sum 函數(shù) module.exports = sum;
-
main.js
// 1途乃、獲取index.html中的dom對(duì)象 var first = document.getElementById('first'); var btn = document.getElementById('btn'); var two = document.getElementById('two'); var res = document.getElementById('res'); btn.onclick = function(){ var firstValue = parseFloat(first.value); var twoValue = parseFloat(two.value); //2、獲取 module1.js中的 sum函數(shù) //http://www.ruanyifeng.com/blog/2015/05/require.html var sum = require('./module1.js'); res.value = sum(firstValue,twoValue); }
-
-
-
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text" id="first"> <input type="button" id="btn" value="+"> <input type="text" id="two"> <input type="button" id="btn" value="="> <input type="text" id="res"> <script src="./dist/js/bulid.js"></script> </body> </html>
-
webpack.config.js(手動(dòng)創(chuàng)建)
const path = require('path'); // 首先要引入node.js中path 模塊扔傅，用于處理文件與目錄的路徑 // const 命令聲明一個(gè)只讀的常量耍共，一旦聲明烫饼，值不可以改變，改變會(huì)報(bào)錯(cuò)划提；只聲明不賦值也會(huì)報(bào)錯(cuò) // 常量存儲(chǔ)的是一個(gè)不可以變化的變量枫弟。 // module.exports = { entry:'./src/./js/main.js', // 指定入口文件 output:{ path: path.resolve(__dirname, './dist/js'), // 指定出口文件的路徑目錄 filename: 'bulid.js' // 制定出口文件的名稱 },
1、初始化一個(gè)項(xiàng)目（會(huì)創(chuàng)建一個(gè)package.json文件）
npm init
2鹏往、在當(dāng)前的項(xiàng)目中安裝Webpack作為依賴包
npm install --save-dev webpack
說(shuō)明：
--save：將配置信息保存到package.json中淡诗，同時(shí)
--save：也是項(xiàng)目生產(chǎn)環(huán)境，項(xiàng)目發(fā)布之后還依賴的東西伊履，保存在dependencies例如：如果你用了 jQuery韩容，由于發(fā)布之后還是依賴
jQuery，所以是dependencies
--save-dev：是項(xiàng)目開(kāi)發(fā)環(huán)境依賴的東西唐瀑，保存在devDependencies中例如：寫(xiě) ES6 代碼群凶，如果你想編譯成
ES5發(fā)布那么babel就是devDependencies
3、當(dāng)前項(xiàng)目結(jié)構(gòu)
[圖片上傳失敗...(image-18e47b-1543848622743)]
4哄辣、實(shí)現(xiàn)CSS打包
npm install css-loader style-loader --save-dev 或者 cnpm install css-loader style-loader --save-dev-
在src—>css目錄中新建main.css
#first{ border: 1px solid red; }
-
在webpack.config.js中配置相關(guān)的loader
const path = require('path'); // 首先要引入node.js中path 模塊请梢，用于處理文件與目錄的路徑 // const 命令聲明一個(gè)只讀的常量，一旦聲明力穗，值不可以改變毅弧，改變會(huì)報(bào)錯(cuò)；只聲明不賦值也會(huì)報(bào)錯(cuò) // 常量存儲(chǔ)的是一個(gè)不可以變化的變量当窗。 // module.exports = { entry:'./src/./js/main.js', // 指定入口文件 output:{ path: path.resolve(__dirname, './dist/js'), // 指定出口文件的路徑目錄 filename: 'bulid.js' // 制定出口文件的名稱 }, module:{ rules:[ // 在webpack2中够坐，loaders 被替換成了 rules 其實(shí)就是loader的規(guī)則 { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] // test 說(shuō)明了當(dāng)前 loader 能處理那些類型的文件 // use 則指定了 loader 的類型。 // 注意：數(shù)組中的loader不能省略擴(kuò)展名 } ] } }
-
在main.js中獲取css目錄中的main.css文件
// 1崖面、獲取index.html中的dom對(duì)象 var first = document.getElementById('first'); var btn = document.getElementById('btn'); var two = document.getElementById('two'); var res = document.getElementById('res'); btn.onclick = function(){ var firstValue = parseFloat(first.value); var twoValue = parseFloat(two.value); //2元咙、獲取 module1.js中的 sum函數(shù) //http://www.ruanyifeng.com/blog/2015/05/require.html var sum = require('./module1.js'); res.value = sum(firstValue,twoValue); } // 3、獲取css目錄中的main.css文件 require('../css/main.css');
在終端中輸入
webpack命令進(jìn)行css文件打包
5巫员、實(shí)現(xiàn)SCSS打包
-
在src目錄中新建 sass目錄--> scss1.scss
// scss1.scss文件 $color:purple; #two{ border:1px solid $color; }
-
安裝對(duì)應(yīng)的loader
npm install sass-loader node-sass webpack --save-dev或者
cnpm install sass-loader css-loader style-loader node-sass webpack --save-dev
在webpack.config.js中配置相關(guān)的loader
const path = require('path'); // 首先要引入node.js中path 模塊庶香，用于處理文件與目錄的路徑 // const 命令聲明一個(gè)只讀的常量，一旦聲明简识，值不可以改變脉课，改變會(huì)報(bào)錯(cuò)；只聲明不賦值也會(huì)報(bào)錯(cuò) // 常量存儲(chǔ)的是一個(gè)不可以變化的變量财异。 // module.exports = { entry:'./src/./js/main.js', // 指定入口文件 output:{ path: path.resolve(__dirname, './dist/js'), // 指定出口文件的路徑目錄 filename: 'bulid.js' // 制定出口文件的名稱 }, module:{ rules:[ // 在webpack2中，loaders 被替換成了 rules 其實(shí)就是loader的規(guī)則 // 實(shí)現(xiàn) css 打包 { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] // test 說(shuō)明了當(dāng)前 loader 能處理那些類型的文件 // use 則指定了 loader 的類型唱遭。 // 注意：數(shù)組中的loader不能省略擴(kuò)展名 }, { test: /\.scss$/, // 注意 是sass-loader 戳寸，不是 scss-loader use: [ 'style-loader', 'css-loader', 'sass-loader' ] } ] } }-
在js目錄中 main.js里面引入 scss1.scss
// 1、獲取index.html中的dom對(duì)象 var first = document.getElementById('first'); var btn = document.getElementById('btn'); var two = document.getElementById('two'); var res = document.getElementById('res'); btn.onclick = function(){ var firstValue = parseFloat(first.value); var twoValue = parseFloat(two.value); //2拷泽、獲取 module1.js中的 sum函數(shù) //http://www.ruanyifeng.com/blog/2015/05/require.html var sum = require('./module1.js'); res.value = sum(firstValue,twoValue); } // 3疫鹊、獲取css目錄中的main.css文件 require('../css/main.css'); // 4袖瞻、獲取sass目錄中的scss1.scss文件 require('../sass/scss1.scss');
在終端中輸入
webpack命令進(jìn)行scss文件打包
6、實(shí)現(xiàn)Less打包
-
安裝
cnpm install --save-devcnpm install less less-loder css-loader style-loader webpack --save-dev或者
cnpm install less-loader less --save-dev在webpack.config.js中配置相關(guān)的loader
在在src目錄中新建less目錄--> less1.less
@color:blue; #res{ border:1px dashed blue; }-
在webpack.config.js中配置相關(guān)的loader
const path = require('path'); // 首先要引入node.js中path 模塊拆吆，用于處理文件與目錄的路徑 // const 命令聲明一個(gè)只讀的常量聋迎，一旦聲明，值不可以改變枣耀，改變會(huì)報(bào)錯(cuò)霉晕；只聲明不賦值也會(huì)報(bào)錯(cuò) // 常量存儲(chǔ)的是一個(gè)不可以變化的變量。 // module.exports = { entry:'./src/./js/main.js', // 指定入口文件 output:{ path: path.resolve(__dirname, './dist/js'), // 指定出口文件的路徑目錄 filename: 'bulid.js' // 制定出口文件的名稱 }, module:{ rules:[ // 在webpack2中捞奕，loaders 被替換成了 rules 其實(shí)就是loader的規(guī)則 // 實(shí)現(xiàn) css 打包 { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] // test 說(shuō)明了當(dāng)前 loader 能處理那些類型的文件 // use 則指定了 loader 的類型牺堰。 // 注意：數(shù)組中的loader不能省略擴(kuò)展名 }, // 實(shí)現(xiàn) scss 打包 { test: /\.scss$/, // 注意 是sass-loader ，不是 scss-loader use: [ 'style-loader', 'css-loader', 'sass-loader' ] }, // 實(shí)現(xiàn) less 打包 { test: /\.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] } ] } }
-
在js目錄中 main.js里面引入 less1.less文件
// 5颅围、獲取less目錄中的less1.less文件 require('../less/less1.less');
7伟葫、實(shí)現(xiàn)打包url資源（圖片、gif院促、圖標(biāo)等）功能
在src 目錄中 新建imgs目錄筏养，放入兩張不同大小的圖片
在index.html中新增
<div id="bg1"></div><div id="bg2"></div>-
在mian.css中新增
// mian.css文件 #bg1{ width: 200px; height: 200px; background: url('../imgs/bxg.jpg'); } #bg2{ width: 200px; height: 200px; background: url('../imgs/web.jpg') no-repeat; }
-
前言
如果我們希望在頁(yè)面引入圖片（包括img的src和background的url）。當(dāng)我們基于webpack進(jìn)行開(kāi)發(fā)時(shí)常拓，引入圖片會(huì)遇到一些問(wèn)題渐溶。
? 其中一個(gè)就是引用路徑的問(wèn)題。拿background樣式用url引入背景圖來(lái)說(shuō)墩邀，我們都知道掌猛，webpack最終會(huì)將各個(gè)模塊打包成一個(gè)文件，因此我們樣式中的url路徑是相對(duì)入口html頁(yè)面的眉睹，而不是相對(duì)于原始css文件所在的路徑的荔茬。這就會(huì)導(dǎo)致圖片引入失敗。這個(gè)問(wèn)題是用file-loader解決的竹海，file-loader可以解析項(xiàng)目中的url引入（不僅限于css）慕蔚，根據(jù)我們的配置，將圖片拷貝到相應(yīng)的路徑斋配，再根據(jù)我們的配置孔飒，修改打包后文件引用路徑，使之指向正確的文件艰争。
? 另外坏瞄，如果圖片較多，會(huì)發(fā)很多http請(qǐng)求甩卓，會(huì)降低頁(yè)面性能鸠匀。這個(gè)問(wèn)題可以通過(guò)url-loader解決宅此。url-loader會(huì)將引入的圖片編碼，生成dataURl璧亮。相當(dāng)于把圖片數(shù)據(jù)翻譯成一串字符。再把這串字符打包到文件中，最終只需要引入這個(gè)文件就能訪問(wèn)圖片了。當(dāng)然馁菜，如果圖片較大，編碼會(huì)消耗性能智嚷。因此url-loader提供了一個(gè)limit參數(shù)盏道，小于limit字節(jié)的文件會(huì)被轉(zhuǎn)為DataURl，大于limit的還會(huì)使用file-loader進(jìn)行copy。
? url-loader和file-loader是什么關(guān)系呢？簡(jiǎn)答地說(shuō)，url-loader封裝了file-loader。url-loader不依賴于file-loader，即使用url-loader時(shí)仇矾，只需要安裝url-loader即可贮匕，不需要安裝file-loader花枫，因?yàn)閡rl-loader內(nèi)置了file-loader。通過(guò)上面的介紹劳翰，我們可以看到，url-loader工作分兩種情況：1.文件大小小于limit參數(shù)佳簸，url-loader將會(huì)把文件轉(zhuǎn)為DataURL；2.文件大小大于limit，url-loader會(huì)調(diào)用file-loader進(jìn)行處理哗魂，參數(shù)也會(huì)直接傳給file-loader。因此我們只需要安裝url-loader即可。
-
安裝
cnpm installcnpm install url-loader file-loader --save-dev
-
在webpack.config.js中配置相關(guān)的loader
const path = require('path'); // 首先要引入node.js中path 模塊崔列，用于處理文件與目錄的路徑 // const 命令聲明一個(gè)只讀的常量，一旦聲明，值不可以改變赵讯，改變會(huì)報(bào)錯(cuò)盈咳；只聲明不賦值也會(huì)報(bào)錯(cuò) // 常量存儲(chǔ)的是一個(gè)不可以變化的變量。 // module.exports = { entry:'./src/./js/main.js', // 指定入口文件 output:{ path: path.resolve(__dirname, './dist/js'), // 指定出口文件的路徑目錄 filename: 'bulid.js' // 制定出口文件的名稱 publicPath:'dist/' // path:所有輸出文件的目標(biāo)路徑; // publicPath:輸出解析文件的目錄边翼，url 相對(duì)于 HTML 頁(yè)面 }, module:{ rules:[ // 在webpack2中鱼响，loaders 被替換成了 rules 其實(shí)就是loader的規(guī)則 // 實(shí)現(xiàn) css 打包 { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] // test 說(shuō)明了當(dāng)前 loader 能處理那些類型的文件 // use 則指定了 loader 的類型。 // 注意：數(shù)組中的loader不能省略擴(kuò)展名 }, // 實(shí)現(xiàn) scss 打包 { test: /\.scss$/, // 注意 是sass-loader 组底，不是 scss-loader use: [ 'style-loader', 'css-loader', 'sass-loader' ] }, // 實(shí)現(xiàn) less 打包 { test: /\.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] }, // 實(shí)現(xiàn) url 資源打包 { // 圖片和字體文件使用 url-loader 來(lái)處理 test: /\.(png|jpg|gif|ttf|eot|woff|woff2|svg)$/, use: [ { loader: 'url-loader', // options 為可以配置的選項(xiàng) options: { limit: 8192 // limit=8192表示將所有小于8kb的圖片都轉(zhuǎn)為base64形式（為什么 呢丈积？因?yàn)橐粋€(gè)很小的圖片，不值當(dāng)?shù)娜グl(fā)送一個(gè)請(qǐng)求债鸡，減少請(qǐng)求次 數(shù)江滨。） // （其實(shí)應(yīng)該說(shuō)超過(guò)8kb的才使用 url-loader 來(lái)映射到文件，否 則轉(zhuǎn)為dataurl形式） } } ] //保證輸出的圖片名稱與之前命名的圖片名稱保持一致(目前只是支持這樣的寫(xiě)法厌均， webpack3 沒(méi)有響應(yīng)的options進(jìn)行配置) // use:'url-loader?limit=8192&name=imgs/[name].[ext]' } ] } }
-
在main.js中引入mui目錄中icons-extra.css的文件
// 5唬滑、獲取less目錄中的less1.less文件 require('../less/less1.less'); // 6、獲取src目錄中的mui目錄中icons-extra.css的文件 require('../mui/css/icons-extra.css');
8莫秆、Webpack-dev-server結(jié)合后端服務(wù)器的熱替換配置
webpack-dev-server提供了一個(gè)簡(jiǎn)單的 web 服務(wù)器间雀，并且能夠?qū)崟r(shí)重新加載(live reloading)，同時(shí)把生成好的js和html構(gòu)建到我們的電腦內(nèi)存中镊屎，這樣的話惹挟，即使我們的目錄中沒(méi)有了相關(guān)js等文件，還能夠加載出來(lái)缝驳，這樣能夠提高我們頁(yè)面運(yùn)行速度连锯。
-
安裝
webpack-dev-server插件// 先把之前依賴的包安裝 cnpm installcnpm install webpack-dev-server --save-dev// webpack.config.js const path = require('path'); // 首先要引入node.js中path 模塊，用于處理文件與目錄的路徑 // const 命令聲明一個(gè)只讀的常量用狱，一旦聲明运怖，值不可以改變，改變會(huì)報(bào)錯(cuò)夏伊；只聲明不賦值也會(huì)報(bào)錯(cuò) // 常量存儲(chǔ)的是一個(gè)不可以變化的變量摇展。 module.exports = { entry:'./src/./js/main.js', // 指定入口文件 output:{ path: path.resolve(__dirname, 'dist/js'), // 指定出口文件的路徑目錄 filename: 'bulid.js' // 制定出口文件的名稱 }, module:{ rules:[ // 在webpack2中，loaders 被替換成了 rules 其實(shí)就是loader的規(guī)則 // 實(shí)現(xiàn) css 打包 { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] // test 說(shuō)明了當(dāng)前 loader 能處理那些類型的文件 // use 則指定了 loader 的類型溺忧。 // 注意：數(shù)組中的loader不能省略擴(kuò)展名 }, // 實(shí)現(xiàn) scss 打包 { test: /\.scss$/, // 注意 是sass-loader 咏连，不是 scss-loader use: [ 'style-loader', 'css-loader', 'sass-loader' ] }, // 實(shí)現(xiàn) less 打包 { test: /\.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] }, // 實(shí)現(xiàn) url 資源打包 { // 圖片文件使用 url-loader 來(lái)處理 test: /\.(png|jpg|gif|ttf)$/, use: [ { loader: 'url-loader', // options 為可以配置的選項(xiàng) options: { limit: 8192 // limit=8192表示將所有小于8kb的圖片都轉(zhuǎn)為base64形式 // （其實(shí)應(yīng)該說(shuō)超過(guò)8kb的才使用 url-loader 來(lái)映射到文件，否則轉(zhuǎn)為data url形式） } } ] } ] }, devServer: { // contentBase: './dist', // 在 localhost:8080(默認(rèn)) 下建立服務(wù)鲁森，將 dist 目錄下的文件祟滴，作為可訪問(wèn)文件 contentBase：告訴服務(wù)器從哪里提供內(nèi)容 // 或者通過(guò)以下方式配置 contentBase: path.join(__dirname, "dist"), compress: true, // 當(dāng)它被設(shè)置為true的時(shí)候?qū)λ械姆?wù)器資源采用gzip壓縮 // 對(duì)JS，CSS資源的壓縮率很高歌溉，可以極大得提高文件傳輸?shù)乃俾事⒍瑥亩嵘齱eb性能 port: 9000, // 如果想要改端口，可以通過(guò) port更改 hot: true, // 啟用 webpack 的模塊熱替換特性() inline: true, // 實(shí)現(xiàn)實(shí)時(shí)重載（實(shí)現(xiàn)自動(dòng)刷新功能）默認(rèn)情況下是 true。 host: "localhost" // 如果你希望服務(wù)器外部可訪問(wèn)草慧，指定使用一個(gè) host桶蛔。默認(rèn)是 localhost(也就是你可以不寫(xiě)這個(gè)host這個(gè)配置屬性)。 } }
// package.json { "name": "mywebpack", "version": "1.0.0", "description": "", "main": "webpack.config.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack-dev-server --open" // "start": "webpack-dev-server --open --port 8080 --hot --inline" // 如果在這里配置了冠蒋，就不用在webpack.config.js中配置devServer屬性了羽圃。 }, "author": "", "license": "ISC", "devDependencies": { "css-loader": "^0.28.7", "file-loader": "^1.1.5", "html-webpack-plugin": "^2.30.1", "less": "^3.0.0-alpha.3", "less-loader": "^4.0.5", "node-sass": "^4.5.3", "sass-loader": "^6.0.6", "style-loader": "^0.19.0", "url-loader": "^0.6.2", "webpack": "^3.8.1", "webpack-dev-server": "^2.9.3" } }- 在命令行中運(yùn)行
npm start，就會(huì)看到瀏覽器自動(dòng)加載頁(yè)面抖剿。如果現(xiàn)在修改和保存任意源文件，web 服務(wù)器就會(huì)自動(dòng)重新加載編譯后的代碼识窿，但是打開(kāi)后發(fā)現(xiàn)斩郎，打開(kāi)的是 dist目錄，我們想要的是 index.html顯示我們的頁(yè)面喻频，所以這是我們還要借助里另一個(gè)html-webpack-plugin插件缩宜。
html-webpack-plugin簡(jiǎn)單創(chuàng)建 HTML 文件，用于服務(wù)器訪問(wèn)甥温，其中包括使用script標(biāo)簽的body中的所有webpack包锻煌。-
安裝
html-webpack-plugin插件cnpm install --save-dev html-webpack-plugin
webpack.config.js配置
const path = require('path'); // 首先要引入node.js中path 模塊，用于處理文件與目錄的路徑 // const 命令聲明一個(gè)只讀的常量姻蚓，一旦聲明宋梧，值不可以改變，改變會(huì)報(bào)錯(cuò)狰挡；只聲明不賦值也會(huì)報(bào)錯(cuò) // 常量存儲(chǔ)的是一個(gè)不可以變化的變量捂龄。 // 引入html-webpack-plugin 插件 const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpack = require('webpack'); module.exports = { entry: './src/./js/main.js', // 指定入口文件 output: { path: path.resolve(__dirname, 'dist/js'), // 指定出口文件的路徑目錄 filename: 'bulid.js' // 制定出口文件的名稱 }, module: { rules: [ // 在webpack2中，loaders 被替換成了 rules 其實(shí)就是loader的規(guī)則 // 實(shí)現(xiàn) css 打包 { test: /\.css$/, use: ['style-loader', 'css-loader'] // test 說(shuō)明了當(dāng)前 loader 能處理那些類型的文件 // use 則指定了 loader 的類型加叁。 // 注意：數(shù)組中的loader不能省略擴(kuò)展名 }, // 實(shí)現(xiàn) scss 打包 { test: /\.scss$/, // 注意 是sass-loader 倦沧，不是 scss-loader use: ['style-loader', 'css-loader', 'sass-loader'] }, // 實(shí)現(xiàn) less 打包 { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 實(shí)現(xiàn) url 資源打包 { // 圖片文件使用 url-loader 來(lái)處理 test: /\.(png|jpg|gif|ttf)$/, use: [{ loader: 'url-loader', // options 為可以配置的選項(xiàng) options: { limit: 8192 // limit=8192表示將所有小于8kb的圖片都轉(zhuǎn)為base64形式 // （其實(shí)應(yīng)該說(shuō)超過(guò)8kb的才使用 url-loader 來(lái)映射到文件，否則轉(zhuǎn)為data url形式） } }] } ] }, devServer: { // contentBase: './dist', // 在 localhost:8080(默認(rèn)) 下建立服務(wù)它匕，將 dist 目錄下的文件展融，作為可訪問(wèn)文件 contentBase：告訴服務(wù)器從哪里提供內(nèi)容 // 或者通過(guò)以下方式配置 contentBase: path.join(__dirname, "dist"), port: 9000, // 如果想要改端口，可以通過(guò) port更改 hot: true, // 啟用 webpack 的模塊熱替換特性() inline: true, // 實(shí)現(xiàn)實(shí)時(shí)重載（實(shí)現(xiàn)自動(dòng)刷新功能）默認(rèn)情況下是 true豫柬。 host: "localhost" // 如果你希望服務(wù)器外部可訪問(wèn)告希，指定使用一個(gè) host。默認(rèn)是 localhost(也就是你可以不寫(xiě)這個(gè)host這個(gè)配置屬性)轮傍。 }, plugins: [ new HtmlWebpackPlugin({ title: '首頁(yè)', // 用于生成的HTML文檔的標(biāo)題 filename: 'index.html', //寫(xiě)入HTML的文件暂雹。默認(rèn)為index.html。也可以指定一個(gè)子目錄（例如：）assets/admin.html template: 'index.html' // Webpack需要模板的路徑 }), new webpack.HotModuleReplacementPlugin() // 需要結(jié)合 啟用熱替換模塊(Hot Module Replacement)创夜，也被稱為 HMR ] }再次使用
npm start命令就可以實(shí)現(xiàn)瀏覽器自動(dòng)更新杭跪。-
問(wèn)題來(lái)了，HtmlWebpackPlugin中的 title并沒(méi)有顯示出來(lái)，原因是需要在定義的template模板中使用ejs語(yǔ)法涧尿，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- EJS 語(yǔ)法 /* EJS是一個(gè)簡(jiǎn)單高效的模板語(yǔ)言系奉，通過(guò)數(shù)據(jù)和模板，可以生成HTML標(biāo)記文本姑廉∪绷粒可以說(shuō)EJS是一個(gè)JavaScript庫(kù)，EJS可以同時(shí)運(yùn)行在客戶端和服務(wù)器端桥言，客戶端安裝直接引入文件即可 */ --> <title><%= htmlWebpackPlugin.options.title%></title> </head> <body> <input type="text" id="first"> <input type="button" id="btn" value="+"> <input type="text" id="two"> <input type="button" id="btn" value="="> <input type="text" id="res"> <div id="bg1"></div> <div id="bg2"></div> </body> </html>
再次使用
npm start命令就可以啦萌踱。
9、ES6轉(zhuǎn)換為ES5語(yǔ)法
-
安裝
-
cnpm install --save-dev babel-loader babel-core babel-preset-env-
babel-core如果某些代碼需要調(diào)用Babel的API進(jìn)行轉(zhuǎn)碼号阿，就要使用babel-core模塊 -
babel-preset-env通過(guò)根據(jù)您的目標(biāo)瀏覽器或運(yùn)行時(shí)環(huán)境自動(dòng)確定您需要的Babel插件
-
-
babel 對(duì)一些公共方法使用了非常小的輔助代碼并鸵，比如
_extend。 默認(rèn)情況下會(huì)被添加到每一個(gè)需要它的文件中,你可以引入 babel runtime 作為一個(gè)獨(dú)立模塊扔涧，來(lái)避免重復(fù)引入园担。- 你必須執(zhí)行
npm install babel-plugin-transform-runtime --save-dev來(lái)把它包含到你的項(xiàng)目中，也要使用npm install babel-runtime --save把babel-runtime安裝為一個(gè)依賴
- 你必須執(zhí)行
-
配置
// 實(shí)現(xiàn) url 資源打包
{
// 圖片文件使用 url-loader 來(lái)處理
test: /\.(png|jpg|gif|ttf)$/,
use: [{
loader: 'url-loader',
// options 為可以配置的選項(xiàng)
options: {
limit: 8192
// limit=8192表示將所有小于8kb的圖片都轉(zhuǎn)為base64形式
// （其實(shí)應(yīng)該說(shuō)超過(guò)8kb的才使用 url-loader 來(lái)映射到文件枯夜，否則轉(zhuǎn)為data url形式）
}
}]
},
// 實(shí)現(xiàn) ES6轉(zhuǎn) ES5
{
test: /\.js$/,
exclude: /(node_modules)/, // exclude 排除的意思弯汰，把 node_modules文件夾排除編譯之外
use: {
loader: 'babel-loader',
options: {
// presets 預(yù)設(shè)列表（一組插件）加載和使用
presets: ['env'],
plugins: ['transform-runtime'] // 加載和使用的插件列表
}
}
}
-
把一些代碼改成ES6 語(yǔ)法的寫(xiě)法
// moudule1.js function sum(x,y){ return x + y; } // 導(dǎo)出 sum 函數(shù) // module.exports = sum; // 改成ES6 的寫(xiě)法語(yǔ)法 export default{ sum }
- ```js // main.js // 1、獲取index.html中的dom對(duì)象 var first = document.getElementById('first'); var btn1 = document.getElementById('btn1'); var two = document.getElementById('two'); var res = document.getElementById('res'); console.log(1); btn1.onclick = function() { var firstValue = parseFloat(first.value); var twoValue = parseFloat(two.value); //2湖雹、獲取 module1.js中的 sum函數(shù) //http://www.ruanyifeng.com/blog/2015/05/require.html console.log(2); /* var sum = require('./module1.js'); res.value = sum(firstValue,twoValue);*/ res.value = sumObj.sum(firstValue, twoValue); } // 3咏闪、獲取css目錄中的main.css文件 // require('../css/main.css'); // 把步驟3 改為 ES6寫(xiě)法,引入css目錄中的main.css文件 import '../css/main.css'; // 4、獲取sass目錄中的scss1.scss文件 require('../sass/scss1.scss'); // 5劝枣、獲取less目錄中的less1.less文件 require('../less/less1.less'); // 6汤踏、獲取src目錄中的mui目錄中icons-extra.css的文件 require('../mui/css/icons-extra.css'); // 把 var sum = require('./module1.js'); 寫(xiě)成 ES6語(yǔ)法 import sumObj from './module1.js' ```
10、防止文件緩存（生成帶有20位的hash值的唯一文件）
// webpack.config.js output: { path: path.resolve(__dirname, 'dist/js'), // 指定出口文件的路徑目錄 // filename: 'bulid.js' // 制定出口文件的名稱 filename: '[name].[hash].js' // 將入口文件重命名為帶有20位的hash值的唯一文件 }
11舔腾、抽取CSS為單獨(dú)文件
-
安裝插件從 build.js文件中提取文本（CSS）到單獨(dú)的文件
npm install --save-dev extract-text-webpack-plugin
-
在webpack.config.js中配置
const path = require('path'); // 首先要引入node.js中path 模塊溪胶，用于處理文件與目錄的路徑 // const 命令聲明一個(gè)只讀的常量，一旦聲明稳诚，值不可以改變哗脖，改變會(huì)報(bào)錯(cuò)；只聲明不賦值也會(huì)報(bào)錯(cuò) // 常量存儲(chǔ)的是一個(gè)不可以變化的變量扳还。 // 引入html-webpack-plugin 插件 const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpack = require('webpack'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { entry: './src/./js/main.js', // 指定入口文件 output: { path: path.resolve(__dirname, 'dist'), // 指定出口文件的路徑目錄 // filename: 'bulid.js' // 制定出口文件的名稱 // path指定了本地構(gòu)建地址才避，publicPath指定在瀏覽器中所引用的,指定的是構(gòu)建后在html里的路徑 // publicPath: './', // 將入口文件重命名為帶有20位的hash值的唯一文件 filename: '[name].[hash].js' }, module: { rules: [ // 在webpack2中，loaders 被替換成了 rules 其實(shí)就是loader的規(guī)則 // 實(shí)現(xiàn) css 打包 /*{ test: /\.css$/, use: ['style-loader', 'css-loader'] // test 說(shuō)明了當(dāng)前 loader 能處理那些類型的文件 // use 則指定了 loader 的類型氨距。 // 注意：數(shù)組中的loader不能省略擴(kuò)展名 },*/ // 實(shí)現(xiàn) scss 打包 { test: /\.scss$/, // 注意 是sass-loader 桑逝，不是 scss-loader use: ['style-loader', 'css-loader', 'sass-loader'] }, // 實(shí)現(xiàn) less 打包 { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 實(shí)現(xiàn) url 資源打包 { // 圖片文件使用 url-loader 來(lái)處理 test: /\.(png|jpg|gif|ttf)$/, use: [{ loader: 'url-loader', // options 為可以配置的選項(xiàng) options: { limit: 8192 // limit=8192表示將所有小于8kb的圖片都轉(zhuǎn)為base64形式 // （其實(shí)應(yīng)該說(shuō)超過(guò)8kb的才使用 url-loader 來(lái)映射到文件，否則轉(zhuǎn)為data url形式） } }] //保證輸出的圖片名稱與之前命名的圖片名稱保持一致(目前只是支持這樣的寫(xiě)法俏让， webpack3 沒(méi)有響應(yīng)的options進(jìn)行配置) // use:'url-loader?limit=8192&name=imgs/[name].[ext]' }, // 實(shí)現(xiàn) ES6轉(zhuǎn) ES5 { test: /\.js$/, exclude: /(node_modules)/, // exclude 排除的意思楞遏，把 node_modules文件夾排除編譯之外 use: { loader: 'babel-loader', options: { // presets 預(yù)設(shè)列表（一組插件）加載和使用 presets: ['env'], plugins: ['transform-runtime'] // 加載和使用的插件列表 } } }, // 提取 css模塊（如果使用這個(gè)模塊的話茬暇，需要把之前的CSS打包模塊注釋掉，不然會(huì)重復(fù)） { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) } ] }, devServer: { // contentBase: './dist', // 在 localhost:8080(默認(rèn)) 下建立服務(wù)寡喝，將 dist 目錄下的文件糙俗，作為可訪問(wèn)文件 contentBase：告訴服務(wù)器從哪里提供內(nèi)容 // 或者通過(guò)以下方式配置 contentBase: path.join(__dirname, "dist"), port: 9000, // 如果想要改端口，可以通過(guò) port更改 hot: true, // 啟用 webpack 的模塊熱替換特性() inline: true, // 實(shí)現(xiàn)實(shí)時(shí)重載（實(shí)現(xiàn)自動(dòng)刷新功能）默認(rèn)情況下是 true预鬓。 host: "localhost" // 如果你希望服務(wù)器外部可訪問(wèn)巧骚，指定使用一個(gè) host。默認(rèn)是 localhost(也就是你可以不寫(xiě)這個(gè)host這個(gè)配置屬性)格二。 }, plugins: [ // 從 bundle 中提取文本（CSS）到單獨(dú)的文件 new ExtractTextPlugin({ // 提取css劈彪，并重名為帶有 20位的hash值的唯一文件 filename: '[name].[hash].css', // 將所有的獨(dú)立文件模塊（這里指的是css文件）合并成一個(gè)文件 allChunks: true }), new HtmlWebpackPlugin({ title: '首頁(yè)', // 用于生成的HTML文檔的標(biāo)題 filename: 'index.html', //寫(xiě)入HTML的文件。默認(rèn)為index.html顶猜。也可以指定一個(gè)子目錄（例如：）assets/admin.html template: 'index.html' // Webpack需要模板的路徑 // template: 'index.ejs' // Webpack需要模板的路徑 }), // 需要結(jié)合webpack-dev-server 啟用熱替換模塊(Hot Module Replacement)粉臊，也被稱為 HMR new webpack.HotModuleReplacementPlugin() ] }
12、開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境的分離
（1）開(kāi)發(fā)環(huán)境與生產(chǎn)環(huán)境分離的原因如下：
- 在開(kāi)發(fā)環(huán)境中驶兜，我們使用熱更新插件幫助我們實(shí)現(xiàn)瀏覽器的自動(dòng)更新功能，我們的代碼沒(méi)有進(jìn)行壓縮远寸，如果壓縮了不方便我們調(diào)試代碼等等抄淑，所以以上這些代碼不應(yīng)出現(xiàn)在生產(chǎn)環(huán)境中。
- 生產(chǎn)環(huán)境中驰后，我們把項(xiàng)目部署到服務(wù)器時(shí)肆资，我們會(huì)對(duì)代碼進(jìn)行各種各樣的優(yōu)化，比如壓縮代碼等等灶芝，這時(shí)候我們不應(yīng)該把這些代碼放到開(kāi)發(fā)環(huán)境中郑原，不利于代碼開(kāi)發(fā)和調(diào)試。
總結(jié)：針對(duì)以上這些說(shuō)明夜涕，我們很有必要把區(qū)分開(kāi)發(fā)環(huán)境與生產(chǎn)環(huán)境分離犯犁。
（2）開(kāi)發(fā)環(huán)境的配置和生產(chǎn)換環(huán)境配置的區(qū)別。
- 開(kāi)發(fā)環(huán)境有的配置女器，生產(chǎn)環(huán)境不一定有酸役，比如說(shuō)熱更新時(shí)使用到的
HotModuleReplacementPlugin。- 生產(chǎn)環(huán)境有的配置驾胆，開(kāi)發(fā)環(huán)境不一定有涣澡，比如說(shuō)用來(lái)壓縮js用的
UglifyJsPlugin。
-
如何去做丧诺？
1> 因?yàn)閣ebpack 默認(rèn)找的是 webpack.config.js配置文件入桂，所以要把開(kāi)發(fā)環(huán)境的webpack.config.js配置文件改為webpack.dev.config.js代表開(kāi)發(fā)環(huán)境的配置文件。
2> 新建一個(gè)webpack.prod.config.js驳阎，再把開(kāi)發(fā)環(huán)境中的webpack.config.js復(fù)制進(jìn)去（沒(méi)用的配置文件該刪除的刪除）
-
3> 修改package.json文件（在
scripts標(biāo)簽中添加"dev"和"prod"屬性配置）"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack --config webpack.dev.config.js", "prod": "webpack --config webpack.prod.config.js" },
-
怎樣執(zhí)行命令
- 執(zhí)行開(kāi)發(fā)環(huán)境的中配置
npm run dev
- 執(zhí)行生產(chǎn)環(huán)境的中配置
npm run prod
- 執(zhí)行開(kāi)發(fā)環(huán)境的中配置
13抗愁、在生產(chǎn)環(huán)境中配置代碼壓縮功能
-
配置webpack.prod.config.js 文件
// webpack.prod.config.js var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin; // …… plugins: [ // …… // js代碼 壓縮 new UglifyJsPlugin({ compress: { warnings: false } }) ]
執(zhí)行
npm run prod命令
四馁蒂、webpack1和webpack2的區(qū)別
（webpack1.0已經(jīng)廢棄使用，建議使用webpack2.0+）
? webpack1和webpack2的區(qū)別：https://webpack.js.org/guides/migrating/
? 1驹愚、resolve.modulesDirectories 被重命名為 resolve.modules
? 2远搪、module.loaders 將繼續(xù)支持，但在未來(lái)它將被module.rules 替換逢捺。
? 3谁鳍、……
-=-=-=-==-=-=-=-=-=-=-=-=-=-=over-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
作者：it筱竹
鏈接：http://www.reibang.com/p/8ff8e71dcbc6
來(lái)源：簡(jiǎn)書(shū)
簡(jiǎn)書(shū)著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處劫瞳。
