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配置
搭建項(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)
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-dev
cnpm 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;
}
使用注意事項(xiàng)
1.如果我們希望在頁(yè)面引入圖片（包括img的src和background的url）。當(dāng)我們基于webpack進(jìn)行開(kāi)發(fā)時(shí)，引入圖片會(huì)遇到一些問(wèn)題。
?2. 其中一個(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ù)我們的配置，修改打包后文件引用路徑，使之指向正確的文件。
3.? 另外，如果圖片較多，會(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。
4.? 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 install
cnpm 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 install
cnpm 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)記文本?？梢哉f(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è)依賴
配置
// 實(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ě)法
- ```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'
```
// moudule1.js
function sum(x,y){
return x + y;
}
// 導(dǎo)出 sum 函數(shù)
// module.exports = sum;
// 改成ES6 的寫(xiě)法語(yǔ)法
export default{
sum
}
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
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+
1、resolve.modulesDirectories 被重命名為 resolve.modules
2、module.loaders 將繼續(xù)支持，但在未來(lái)它將被module.rules 替換。
以上就是webpack安裝配置及使用教程詳解的詳細(xì)內(nèi)容，更多關(guān)于webpack安裝配置教程的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了Java開(kāi)發(fā) 富文本編輯器TinyMCE詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了微信小程序 二維碼canvas繪制實(shí)例詳解的相關(guān)資料,這里附有實(shí)例代碼，微信小程序 使用canvas 進(jìn)行二維碼的繪制，需要的朋友可以參考下2017-01-01
js前端架構(gòu)Git?commit提交規(guī)范
這篇文章主要為大家介紹了前端架構(gòu)Git?commit提交規(guī)范示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
微信小程序Server端環(huán)境配置詳解（SSL， Nginx HTTPS，TLS 1.2 升級(jí)）
這篇文章主要介紹了微信小程序Server端環(huán)境配置詳解（SSL， Nginx HTTPS，TLS 1.2 升級(jí)）的相關(guān)資料,需要的朋友可以參考下2017-01-01
輸入框跟隨文字內(nèi)容適配寬實(shí)現(xiàn)示例
這篇文章主要為大家介紹了輸入框跟隨文字內(nèi)容適配寬實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
詳解requestAnimationFrame和setInterval該如何選擇
這篇文章主要為大家介紹了requestAnimationFrame和setInterval該如何選擇示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>2023-03-03
Web項(xiàng)目如何配置Eslint過(guò)程詳解
這篇文章主要為大家介紹了Web項(xiàng)目如何配置Eslint過(guò)程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
這篇文章主要為大家介紹了requestAnimationFrame使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
three.js-結(jié)合dat.gui實(shí)現(xiàn)界面可視化修改及調(diào)試詳解
這篇文章主要為大家介紹了three.js-結(jié)合dat.gui實(shí)現(xiàn)界面可視化修改及調(diào)試詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
JS實(shí)現(xiàn)頁(yè)面炫酷的時(shí)鐘特效示例
這篇文章主要為大家介紹了JS實(shí)現(xiàn)頁(yè)面炫酷的時(shí)鐘特效示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08