溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“webpack如何使用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
由于前端之前js、css、圖片文件需要單獨進行壓縮和打包，這樣團隊人員處理很繁瑣，然后 Instagram 團隊就想讓這些工作自動化，然后webpack應運而生。
webpack是一個模塊打包器（module bundler），webpack視HTML，JS，CSS，圖片等文件都是一種 資源 ，每個資源文件都是一個模塊（module）文件，webpack就是根據每個模塊文件之間的依賴關系將所有的模塊打包（bundle）起來。
對 CommonJS 、 AMD 、ES6的語法做了兼容
對js、css、圖片等資源文件都支持打包（適合團隊化開發）
比方你寫一個js文件，另外一個人也寫一個js文件，需要合并很麻煩，現在交給webpack合并很簡單
有獨立的配置文件webpack.config.js
可以將代碼切割成不同的chunk，實現按需加載，降低了初始化時間
具有強大的Plugin（插件）接口，大多是內部插件，使用起來比較靈活
……
CommonJS、AMD、CMD是用于JavaScript模塊管理的三大規范，CommonJS定義的是模塊的同步加載，是一個更偏向于服務器端的規范（也可以在瀏覽器中使用），主要用于Nodejs，根據CommonJS規范，一個單獨的文件就是一個模塊，加載模塊使用require()方法，該方法讀取一個文件并執行，最后返回文件內部的exports對象。
AMD和CMD則是定義模塊異步加載適用于瀏覽器端，都是為了 JavaScript 的模塊化開發，（這里說一下為什要有異步加載，因為瀏覽器如果使用common.js同步加載模塊的話，就會導致性能等問題，所以針對這個問題，又出了一個規范，這個規范可以實現異步加載依賴模塊）
gulp是前端自動化構建工具，強調的是前端開發的工作流程，我們可以通過配置一系列的task，定義task處理的事情（代碼壓縮、合并、編譯、瀏覽器實時更新等），然后定義執行順序，來讓gulp執行這些task，從而構建項目的整個前端開發流程，自動化構建工具并不能把所有模塊打包到一起，也不能構建不同模塊之間的依賴關系。
webpack是 JavaScript 應用程序的模塊打包器，強調的是一個前端模塊化方案，更側重模塊打包，我們可以把開發中的所有資源（圖片、js文件、css文件等）都看成模塊，通過loader（加載器）和plugins（插件）對資源進行處理，打包成符合生產環境部署的前端資源。
對于依賴的模塊，AMD 是提前執行，CMD 是延遲執行。不過 RequireJS 從 2.0 開始，也改成可以延遲執行（根據寫法不同，處理方式不同）
CMD 推崇依賴就近，AMD 推崇依賴前置
AMD 的 API 默認是一個當多個用，CMD 的 API 嚴格區分，推崇職責單一。比如 AMD 里，require 分全局 require 和局部 require，都叫 require。CMD 里，沒有全局 require，而是根據模塊系統的完備性，提供 seajs.use 來實現模塊系統的加載啟動。CMD 里，每個 API 都簡單純粹
AMD規范會提前加載依賴模塊，AMD規范是通過requireJs 在推廣過程中對模塊定義的規范化產出。（AMD 規范：https://github.com/amdjs/amdjs-api/wiki/AMD）
CMD規范會延遲加載依賴模塊， CMD 規范是 SeaJs 在推廣過程中對模塊定義的規范化產出。
（CMD規范：https://github.com/seajs/seajs/issues/242）
AMD規范和CMD規范的區別
webpack和gulp的區別
(1)、webpack的核心概念分為 入口(Entry)、加載器(Loader)、插件(Plugins)、出口(Output);
webpack整體認知
入口(Entry)：入口起點告訴 webpack 從哪里開始，并根據依賴關系圖確定需要打包的文件內容
加載器(Loader)：webpack 將所有的資源（css, js, image 等）都看做模塊，但是 webpack 能處理的只是 JavaScript，因此，需要存在一個能將其他資源轉換為模塊，讓 webpack 能將其加入依賴樹中的東西，它就是 loader。loader用于對模塊的源代碼進行轉換。loader 可以使你在 import 或"加載"模塊時預處理文件。因此，loader 類似于其他構建工具中“任務(task)”，并提供了處理前端構建步驟的強大方法。
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader'
}
]插件(Plugins)：loader 只能針對某種特定類型的文件進行處理，而 plugin 的功能則更為強大。在 plugin 中能夠介入到整個 webpack 編譯的生命周期，Plugins用于解決 loader 無法實現的其他事情，也就是說loader是預處理文件，那plugin 就是后處理文件。
對loader打包后的模塊文件（bundle.js）進行二次優化處理，例如：代碼壓縮從而減小文件體積
提供輔助開發的作用：例如：熱更新（瀏覽器實時顯示）
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]使用 node -v 命令檢查版本
https://cnpmjs.org/
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用 cnpm -v 命令檢查版本
https://www.npmjs.com/package/nrm
nrm可以幫助我們切換不同的NPM源的快捷開關，可以切換的NPM源包括：npm，cnpm，taobao， rednpm， npmMirror ， edunpm
第一種方法（由于是外網訪問進行安裝，可能會被墻） npm install -g nrm
第二種方法（國內的淘寶鏡像，訪問穩定，推薦） cnpm install -g nrm
使用 nrm - V 命令檢查版本(注意這里的 V 是大寫的)
使用nrm ls 命令可以查看當前可以可以切換的 NPM源
使用 npm use cnpm 命令 指定要使用的哪種NPM源
全局安裝
npm install --global webpack
在項目中安裝最新版本或特定版本，分別執行以下命令：
npm install --save-dev webpack npm install --save-dev webpack@<version>
webpack（項目總目錄）
dist
src
moudle1.js
main.js
function sum(x,y){
return x + y;
}
// 導出 sum 函數
module.exports = sum;// 1、獲取index.html中的dom對象
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函數
//http://www.ruanyifeng.com/blog/2015/05/require.html
var sum = require('./module1.js');
res.value = sum(firstValue,twoValue);
}js
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(手動創建)
const path = require('path'); // 首先要引入node.js中path 模塊，用于處理文件與目錄的路徑
// const 命令聲明一個只讀的常量，一旦聲明，值不可以改變，改變會報錯；只聲明不賦值也會報錯
// 常量存儲的是一個不可以變化的變量。
//
module.exports = {
entry:'./src/./js/main.js', // 指定入口文件
output:{
path: path.resolve(__dirname, './dist/js'), // 指定出口文件的路徑目錄
filename: 'bulid.js' // 制定出口文件的名稱
},npm init
npm install --save-dev webpack
說明：
--save：將配置信息保存到package.json中，同時
--save：也是項目生產環境，項目發布之后還依賴的東西，保存在dependencies例如：如果你用了 jQuery，由于發布之后還是依賴
jQuery，所以是dependencies
--save-dev：是項目開發環境依賴的東西，保存在devDependencies中例如：寫 ES6 代碼，如果你想編譯成
ES5發布那么babel就是devDependencies
當前項目結構
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中配置相關的loader
const path = require('path'); // 首先要引入node.js中path 模塊，用于處理文件與目錄的路徑
// const 命令聲明一個只讀的常量，一旦聲明，值不可以改變，改變會報錯；只聲明不賦值也會報錯
// 常量存儲的是一個不可以變化的變量。
//
module.exports = {
entry:'./src/./js/main.js', // 指定入口文件
output:{
path: path.resolve(__dirname, './dist/js'), // 指定出口文件的路徑目錄
filename: 'bulid.js' // 制定出口文件的名稱
},
module:{
rules:[
// 在webpack2中，loaders 被替換成了 rules 其實就是loader的規則
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
// test 說明了當前 loader 能處理那些類型的文件
// use 則指定了 loader 的類型。
// 注意：數組中的loader不能省略擴展名
}
]
}
}在main.js中獲取css目錄中的main.css文件
// 1、獲取index.html中的dom對象
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函數
//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命令進行css文件打包
在src目錄中新建 sass目錄--> scss1.scss
// scss1.scss文件
$color:purple;
#two{
border:1px solid $color;
}安裝對應的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中配置相關的loader
const path = require('path'); // 首先要引入node.js中path 模塊，用于處理文件與目錄的路徑
// const 命令聲明一個只讀的常量，一旦聲明，值不可以改變，改變會報錯；只聲明不賦值也會報錯
// 常量存儲的是一個不可以變化的變量。
//
module.exports = {
entry:'./src/./js/main.js', // 指定入口文件
output:{
path: path.resolve(__dirname, './dist/js'), // 指定出口文件的路徑目錄
filename: 'bulid.js' // 制定出口文件的名稱
},
module:{
rules:[
// 在webpack2中，loaders 被替換成了 rules 其實就是loader的規則
// 實現 css 打包
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
// test 說明了當前 loader 能處理那些類型的文件
// use 則指定了 loader 的類型。
// 注意：數組中的loader不能省略擴展名
},
{
test: /\.scss$/,
// 注意 是sass-loader ，不是 scss-loader
use: [ 'style-loader', 'css-loader', 'sass-loader' ]
}
]
}
}在js目錄中 main.js里面引入 scss1.scss
// 1、獲取index.html中的dom對象
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函數
//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命令進行scss文件打包
安裝
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中配置相關的loader
在在src目錄中新建less目錄--> less1.less
@color:blue;
#res{
border:1px dashed blue;
}在webpack.config.js中配置相關的loader
const path = require('path'); // 首先要引入node.js中path 模塊，用于處理文件與目錄的路徑
// const 命令聲明一個只讀的常量，一旦聲明，值不可以改變，改變會報錯；只聲明不賦值也會報錯
// 常量存儲的是一個不可以變化的變量。
//
module.exports = {
entry:'./src/./js/main.js', // 指定入口文件
output:{
path: path.resolve(__dirname, './dist/js'), // 指定出口文件的路徑目錄
filename: 'bulid.js' // 制定出口文件的名稱
},
module:{
rules:[
// 在webpack2中，loaders 被替換成了 rules 其實就是loader的規則
// 實現 css 打包
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
// test 說明了當前 loader 能處理那些類型的文件
// use 則指定了 loader 的類型。
// 注意：數組中的loader不能省略擴展名
},
// 實現 scss 打包
{
test: /\.scss$/,
// 注意 是sass-loader ，不是 scss-loader
use: [ 'style-loader', 'css-loader', 'sass-loader' ]
},
// 實現 less 打包
{
test: /\.less$/,
use: [ 'style-loader', 'css-loader', 'less-loader' ]
}
]
}
}在js目錄中 main.js里面引入 less1.less文件
// 5、獲取less目錄中的less1.less文件
require('../less/less1.less');在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;
}前言
如果我們希望在頁面引入圖片（包括img的src和background的url）。當我們基于webpack進行開發時，引入圖片會遇到一些問題。
其中一個就是引用路徑的問題。拿background樣式用url引入背景圖來說，我們都知道，webpack最終會將各個模塊打包成一個文件，因此我們樣式中的url路徑是相對入口html頁面的，而不是相對于原始css文件所在的路徑的。這就會導致圖片引入失敗。這個問題是用file-loader解決的，file-loader可以解析項目中的url引入（不僅限于css），根據我們的配置，將圖片拷貝到相應的路徑，再根據我們的配置，修改打包后文件引用路徑，使之指向正確的文件。
另外，如果圖片較多，會發很多http請求，會降低頁面性能。這個問題可以通過url-loader解決。url-loader會將引入的圖片編碼，生成dataURl。相當于把圖片數據翻譯成一串字符。再把這串字符打包到文件中，最終只需要引入這個文件就能訪問圖片了。當然，如果圖片較大，編碼會消耗性能。因此url-loader提供了一個limit參數，小于limit字節的文件會被轉為DataURl，大于limit的還會使用file-loader進行copy。
url-loader和file-loader是什么關系呢？簡答地說，url-loader封裝了file-loader。url-loader不依賴于file-loader，即使用url-loader時，只需要安裝url-loader即可，不需要安裝file-loader，因為url-loader內置了file-loader。通過上面的介紹，我們可以看到，url-loader工作分兩種情況：1.文件大小小于limit參數，url-loader將會把文件轉為DataURL；2.文件大小大于limit，url-loader會調用file-loader進行處理，參數也會直接傳給file-loader。因此我們只需要安裝url-loader即可。
安裝
cnpm install
cnpm install url-loader file-loader --save-dev
在webpack.config.js中配置相關的loader
const path = require('path'); // 首先要引入node.js中path 模塊，用于處理文件與目錄的路徑
// const 命令聲明一個只讀的常量，一旦聲明，值不可以改變，改變會報錯；只聲明不賦值也會報錯
// 常量存儲的是一個不可以變化的變量。
//
module.exports = {
entry:'./src/./js/main.js', // 指定入口文件
output:{
path: path.resolve(__dirname, './dist/js'), // 指定出口文件的路徑目錄
filename: 'bulid.js' // 制定出口文件的名稱
publicPath:'dist/'
// path:所有輸出文件的目標路徑;
// publicPath:輸出解析文件的目錄，url 相對于 HTML 頁面
},
module:{
rules:[
// 在webpack2中，loaders 被替換成了 rules 其實就是loader的規則
// 實現 css 打包
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
// test 說明了當前 loader 能處理那些類型的文件
// use 則指定了 loader 的類型。
// 注意：數組中的loader不能省略擴展名
},
// 實現 scss 打包
{
test: /\.scss$/,
// 注意 是sass-loader ，不是 scss-loader
use: [ 'style-loader', 'css-loader', 'sass-loader' ]
},
// 實現 less 打包
{
test: /\.less$/,
use: [ 'style-loader', 'css-loader', 'less-loader' ]
},
// 實現 url 資源打包
{
// 圖片和字體文件使用 url-loader 來處理
test: /\.(png|jpg|gif|ttf|eot|woff|woff2|svg)$/,
use: [
{
loader: 'url-loader',
// options 為可以配置的選項
options: {
limit: 8192
// limit=8192表示將所有小于8kb的圖片都轉為base64形式（為什么 呢？因為一個很小的圖片，不值當的去發送一個請求，減少請求次 數。）
// （其實應該說超過8kb的才使用 url-loader 來映射到文件，否 則轉為dataurl形式）
}
}
]
//保證輸出的圖片名稱與之前命名的圖片名稱保持一致(目前只是支持這樣的寫法， webpack3 沒有響應的options進行配置)
// 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');
webpack-dev-server提供了一個簡單的 web 服務器，并且能夠實時重新加載(live reloading)，同時把生成好的js和html構建到我們的電腦內存中，這樣的話，即使我們的目錄中沒有了相關js等文件，還能夠加載出來，這樣能夠提高我們頁面運行速度。
安裝 webpack-dev-server 插件
// 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"
}
}
```
- 在命令行中運行 `npm start`，就會看到瀏覽器自動加載頁面。如果現在修改和保存任意源文件，web 服務器就會自動重新加載編譯后的代碼，但是打開后發現，打開的是 dist目錄，我們想要的是 index.html顯示我們的頁面，所以這是我們還要借助里另一個 `html-webpack-plugin` 插件。// 先把之前依賴的包安裝 cnpm install
cnpm install webpack-dev-server --save-dev
// webpack.config.js
const path = require('path'); // 首先要引入node.js中path 模塊，用于處理文件與目錄的路徑
// const 命令聲明一個只讀的常量，一旦聲明，值不可以改變，改變會報錯；只聲明不賦值也會報錯
// 常量存儲的是一個不可以變化的變量。
module.exports = {
entry:'./src/./js/main.js', // 指定入口文件
output:{
path: path.resolve(__dirname, 'dist/js'), // 指定出口文件的路徑目錄
filename: 'bulid.js' // 制定出口文件的名稱
},
module:{
rules:[
// 在webpack2中，loaders 被替換成了 rules 其實就是loader的規則
// 實現 css 打包
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
// test 說明了當前 loader 能處理那些類型的文件
// use 則指定了 loader 的類型。
// 注意：數組中的loader不能省略擴展名
},
// 實現 scss 打包
{
test: /\.scss$/,
// 注意 是sass-loader ，不是 scss-loader
use: [ 'style-loader', 'css-loader', 'sass-loader' ]
},
// 實現 less 打包
{
test: /\.less$/,
use: [ 'style-loader', 'css-loader', 'less-loader' ]
},
// 實現 url 資源打包
{
// 圖片文件使用 url-loader 來處理
test: /\.(png|jpg|gif|ttf)$/,
use: [
{
loader: 'url-loader',
// options 為可以配置的選項
options: {
limit: 8192
// limit=8192表示將所有小于8kb的圖片都轉為base64形式
// （其實應該說超過8kb的才使用 url-loader 來映射到文件，否則轉為data url形式）
}
}
]
}
]
},
devServer: {
// contentBase: './dist', // 在 localhost:8080(默認) 下建立服務，將 dist 目錄下的文件，作為可訪問文件 contentBase：告訴服務器從哪里提供內容
// 或者通過以下方式配置
contentBase: path.join(__dirname, "dist"),
compress: true,
// 當它被設置為true的時候對所有的服務器資源采用gzip壓縮
// 對JS，CSS資源的壓縮率很高，可以極大得提高文件傳輸的速率，從而提升web性能
port: 9000, // 如果想要改端口，可以通過 port更改
hot: true, // 啟用 webpack 的模塊熱替換特性()
inline: true, // 實現實時重載（實現自動刷新功能）默認情況下是 true。
host: "localhost" // 如果你希望服務器外部可訪問，指定使用一個 host。默認是 localhost(也就是你可以不寫這個host這個配置屬性)。
}
}
html-webpack-plugin 簡單創建 HTML 文件，用于服務器訪問，其中包括使用script標簽的body中的所有webpack包。
安裝 html-webpack-plugin 插件
cnpm install --save-dev html-webpack-plugin
webpack.config.js配置
const path = require('path'); // 首先要引入node.js中path 模塊，用于處理文件與目錄的路徑
// const 命令聲明一個只讀的常量，一旦聲明，值不可以改變，改變會報錯；只聲明不賦值也會報錯
// 常量存儲的是一個不可以變化的變量。
// 引入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 其實就是loader的規則
// 實現 css 打包
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
// test 說明了當前 loader 能處理那些類型的文件
// use 則指定了 loader 的類型。
// 注意：數組中的loader不能省略擴展名
},
// 實現 scss 打包
{
test: /\.scss$/,
// 注意 是sass-loader ，不是 scss-loader
use: ['style-loader', 'css-loader', 'sass-loader']
},
// 實現 less 打包
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
// 實現 url 資源打包
{
// 圖片文件使用 url-loader 來處理
test: /\.(png|jpg|gif|ttf)$/,
use: [{
loader: 'url-loader',
// options 為可以配置的選項
options: {
limit: 8192
// limit=8192表示將所有小于8kb的圖片都轉為base64形式
// （其實應該說超過8kb的才使用 url-loader 來映射到文件，否則轉為data url形式）
}
}]
}
]
},
devServer: {
// contentBase: './dist', // 在 localhost:8080(默認) 下建立服務，將 dist 目錄下的文件，作為可訪問文件 contentBase：告訴服務器從哪里提供內容
// 或者通過以下方式配置
contentBase: path.join(__dirname, "dist"),
port: 9000, // 如果想要改端口，可以通過 port更改
hot: true, // 啟用 webpack 的模塊熱替換特性()
inline: true, // 實現實時重載（實現自動刷新功能）默認情況下是 true。
host: "localhost" // 如果你希望服務器外部可訪問，指定使用一個 host。默認是 localhost(也就是你可以不寫這個host這個配置屬性)。
},
plugins: [
new HtmlWebpackPlugin({
title: '首頁', // 用于生成的HTML文檔的標題
filename: 'index.html', //寫入HTML的文件。默認為index.html。也可以指定一個子目錄（例如：）assets/admin.html
template: 'index.html' // Webpack需要模板的路徑
}),
new webpack.HotModuleReplacementPlugin() // 需要結合 啟用熱替換模塊(Hot Module Replacement)，也被稱為 HMR
]
}再次使用npm start命令就可以實現瀏覽器自動更新。
問題來了，HtmlWebpackPlugin中的 title并沒有顯示出來，原因是需要在定義的template模板中使用ejs語法，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- EJS 語法 /* EJS是一個簡單高效的模板語言，通過數據和模板，可以生成HTML標記文本。可以說EJS是一個JavaScript庫，EJS可以同時運行在客戶端和服務器端，客戶端安裝直接引入文件即可 */ --> <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命令就可以啦。
安裝
你必須執行 npm install babel-plugin-transform-runtime --save-dev 來把它包含到你的項目中，也要使用 npm install babel-runtime --save 把 babel-runtime 安裝為一個依賴
babel-core如果某些代碼需要調用Babel的API進行轉碼，就要使用babel-core模塊
babel-preset-env通過根據您的目標瀏覽器或運行時環境自動確定您需要的Babel插件
cnpm install --save-dev babel-loader babel-core babel-preset-env
babel 對一些公共方法使用了非常小的輔助代碼，比如 _extend。 默認情況下會被添加到每一個需要它的文件中,你可以引入 babel runtime 作為一個獨立模塊，來避免重復引入。
配置
// 實現 url 資源打包
{
// 圖片文件使用 url-loader 來處理
test: /\.(png|jpg|gif|ttf)$/,
use: [{
loader: 'url-loader',
// options 為可以配置的選項
options: {
limit: 8192
// limit=8192表示將所有小于8kb的圖片都轉為base64形式
// （其實應該說超過8kb的才使用 url-loader 來映射到文件，否則轉為data url形式）
}
}]
},
// 實現 ES6轉 ES5
{
test: /\.js$/,
exclude: /(node_modules)/, // exclude 排除的意思，把 node_modules文件夾排除編譯之外
use: {
loader: 'babel-loader',
options: {
// presets 預設列表（一組插件）加載和使用
presets: ['env'],
plugins: ['transform-runtime'] // 加載和使用的插件列表
}
}
}把一些代碼改成ES6 語法的寫法
- ```js
// main.js
// 1、獲取index.html中的dom對象
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函數
//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寫法,引入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'); 寫成 ES6語法
import sumObj from './module1.js'
```// moudule1.js
function sum(x,y){
return x + y;
}
// 導出 sum 函數
// module.exports = sum;
// 改成ES6 的寫法語法
export default{
sum
}// webpack.config.js
output: {
path: path.resolve(__dirname, 'dist/js'), // 指定出口文件的路徑目錄
// filename: 'bulid.js' // 制定出口文件的名稱
filename: '[name].[hash].js' // 將入口文件重命名為帶有20位的hash值的唯一文件
}安裝插件從 build.js文件中提取文本（CSS）到單獨的文件
npm install --save-dev extract-text-webpack-plugin
在webpack.config.js中配置
const path = require('path'); // 首先要引入node.js中path 模塊，用于處理文件與目錄的路徑
// const 命令聲明一個只讀的常量，一旦聲明，值不可以改變，改變會報錯；只聲明不賦值也會報錯
// 常量存儲的是一個不可以變化的變量。
// 引入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指定了本地構建地址，publicPath指定在瀏覽器中所引用的,指定的是構建后在html里的路徑
// publicPath: './',
// 將入口文件重命名為帶有20位的hash值的唯一文件
filename: '[name].[hash].js'
},
module: {
rules: [
// 在webpack2中，loaders 被替換成了 rules 其實就是loader的規則
// 實現 css 打包
/*{
test: /\.css$/,
use: ['style-loader', 'css-loader']
// test 說明了當前 loader 能處理那些類型的文件
// use 則指定了 loader 的類型。
// 注意：數組中的loader不能省略擴展名
},*/
// 實現 scss 打包
{
test: /\.scss$/,
// 注意 是sass-loader ，不是 scss-loader
use: ['style-loader', 'css-loader', 'sass-loader']
},
// 實現 less 打包
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
// 實現 url 資源打包
{
// 圖片文件使用 url-loader 來處理
test: /\.(png|jpg|gif|ttf)$/,
use: [{
loader: 'url-loader',
// options 為可以配置的選項
options: {
limit: 8192
// limit=8192表示將所有小于8kb的圖片都轉為base64形式
// （其實應該說超過8kb的才使用 url-loader 來映射到文件，否則轉為data url形式）
}
}]
//保證輸出的圖片名稱與之前命名的圖片名稱保持一致(目前只是支持這樣的寫法， webpack3 沒有響應的options進行配置)
// use:'url-loader?limit=8192&name=imgs/[name].[ext]'
},
// 實現 ES6轉 ES5
{
test: /\.js$/,
exclude: /(node_modules)/, // exclude 排除的意思，把 node_modules文件夾排除編譯之外
use: {
loader: 'babel-loader',
options: {
// presets 預設列表（一組插件）加載和使用
presets: ['env'],
plugins: ['transform-runtime'] // 加載和使用的插件列表
}
}
},
// 提取 css模塊（如果使用這個模塊的話，需要把之前的CSS打包模塊注釋掉，不然會重復）
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
devServer: {
// contentBase: './dist', // 在 localhost:8080(默認) 下建立服務，將 dist 目錄下的文件，作為可訪問文件 contentBase：告訴服務器從哪里提供內容
// 或者通過以下方式配置
contentBase: path.join(__dirname, "dist"),
port: 9000, // 如果想要改端口，可以通過 port更改
hot: true, // 啟用 webpack 的模塊熱替換特性()
inline: true, // 實現實時重載（實現自動刷新功能）默認情況下是 true。
host: "localhost" // 如果你希望服務器外部可訪問，指定使用一個 host。默認是 localhost(也就是你可以不寫這個host這個配置屬性)。
},
plugins: [
// 從 bundle 中提取文本（CSS）到單獨的文件
new ExtractTextPlugin({
// 提取css，并重名為帶有 20位的hash值的唯一文件
filename: '[name].[hash].css',
// 將所有的獨立文件模塊（這里指的是css文件）合并成一個文件
allChunks: true
}),
new HtmlWebpackPlugin({
title: '首頁', // 用于生成的HTML文檔的標題
filename: 'index.html', //寫入HTML的文件。默認為index.html。也可以指定一個子目錄（例如：）assets/admin.html
template: 'index.html' // Webpack需要模板的路徑
// template: 'index.ejs' // Webpack需要模板的路徑
}),
// 需要結合webpack-dev-server 啟用熱替換模塊(Hot Module Replacement)，也被稱為 HMR
new webpack.HotModuleReplacementPlugin()
]
}（1）開發環境與生產環境分離的原因如下：
在開發環境中，我們使用熱更新插件幫助我們實現瀏覽器的自動更新功能，我們的代碼沒有進行壓縮，如果壓縮了不方便我們調試代碼等等，所以以上這些代碼不應出現在生產環境中。
生產環境中，我們把項目部署到服務器時，我們會對代碼進行各種各樣的優化，比如壓縮代碼等等，這時候我們不應該把這些代碼放到開發環境中，不利于代碼開發和調試。
總結：針對以上這些說明，我們很有必要把區分開發環境與生產環境分離。
（2）開發環境的配置和生產換環境配置的區別。
開發環境有的配置，生產環境不一定有，比如說熱更新時使用到的
HotModuleReplacementPlugin。生產環境有的配置，開發環境不一定有，比如說用來壓縮js用的
UglifyJsPlugin。
如何去做？
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --config webpack.dev.config.js",
"prod": "webpack --config webpack.prod.config.js"
},1> 因為webpack 默認找的是 webpack.config.js配置文件，所以要把開發環境的webpack.config.js配置文件改為webpack.dev.config.js代表開發環境的配置文件。
2> 新建一個webpack.prod.config.js，再把開發環境中的webpack.config.js復制進去（沒用的配置文件該刪除的刪除）
3> 修改package.json文件（在scripts 標簽中添加"dev"和"prod" 屬性配置）
怎樣執行命令
執行開發環境的中配置
npm run dev
執行生產環境的中配置
npm run prod
配置webpack.prod.config.js 文件
// webpack.prod.config.js
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
// ……
plugins: [
// ……
// js代碼 壓縮
new UglifyJsPlugin({
compress: {
warnings: false
}
})
]執行 npm run prod 命令
webpack1.0已經廢棄使用，建議使用webpack2.0+
1、resolve.modulesDirectories 被重命名為 resolve.modules
2、module.loaders 將繼續支持，但在未來它將被module.rules 替換。
“webpack如何使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
