1. 安裝
webpack是基于node所以首先要安裝node環(huán)境和npm
安裝webpack 4 需要 安裝webpack 和webpack-cli
全局安裝 :
npm install webpack -g
npm install webpack-cli -g
局部安裝：
npm install webpack -S
npm install webpack-cli -S
同時局部安裝：
npm install webpack webpack-cli -S
安裝完成后可以運行 webpack -v 查看webpack 版本
運行項目需要全局安裝 webpack 然后在項目跟目錄內(nèi)局部 安裝
二墩蔓、webpack 打包
1、首先我們創(chuàng)建個 demo1文件夾作文項目目錄 然后在demo1里創(chuàng)建 src 文件夾
默認(rèn)出口entry : src/index.js
默認(rèn)出口output : dist/main.js
2、局部安裝webpack
npm install webpack wabpack-cli -S
3待侵、初始化項目生成package.json 執(zhí)行以下命令
npm init
4知市、在src 目錄下創(chuàng)建一個 index.js 表示默認(rèn)的入口文件放航，此時的目錄結(jié)構(gòu)如下
5语淘、在index.js 寫入
alert("webpack")
6妇汗、啟動命令行栅炒，進(jìn)入項目目錄 運行webpack命令進(jìn)行打包
執(zhí)行完成出現(xiàn)以下內(nèi)容表示成功掂摔，同時項目根目錄多出dist目錄
此時的項目目錄結(jié)構(gòu) mian.js 就是打包后的文件
此時我們新建 index.html 并引入 mian.js
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="dist/main.js"></script>
</body>
</html>
打開html將彈出 webpack
webpack配置
在根目錄新建 webpack.cofig.js
var path = require('path');
module.exports = {
mode: 'development', //模式
//入口
entry: './src/index.js',
//入口
output: {
path: path.resolve(__dirname, 'dist'), //出口路徑
filename: 'main.js' //打包好的文件名
},
//模塊：例如解讀css，圖片赢赊，html的轉(zhuǎn)換壓縮
module:{},
//插件
plugins:[],
//本地服務(wù)器
devServer:{}
};
webpack-dev-server 本地服務(wù)器
安裝 webpack-dev-server
npm install webpack-dev-server -S
修改package.json文件 在scripts 對象下添加以下屬性
"scripts": {
//運行 npm run dev 啟動服務(wù)器 --自動打開瀏覽器 --并且實時刷新
"dev": "webpack-dev-server --open --inline"
},
配置webpack.config.js devServer對象最簡單的devServer配置項只有四個
//本地服務(wù)器
devServer:{
//服務(wù)器的路徑乙漓，相當(dāng)于phpStudy的www目錄
contentBase:'./',
//服務(wù)器ip地址，不指定該選項默認(rèn)就是localhost
host:'localhost',
//端口释移，不指定自動生成叭披，默認(rèn)8080
port：8080,
//實時刷新
inline:true
}
執(zhí)行 npm run dev 將自動打開瀏覽器
npm run dev
loader
webpack 自身只理解 JavaScript,所以要打包非js文件如html、css玩讳、圖片等需要使用loader涩蜘，可以吧loader看做是轉(zhuǎn)換器
- css 打包
讓webpack識別 css 需要用到css-loader和style-loader
首先我們先不安裝 css-loader和style-loader嚼贡，在src目錄下新建 css目錄并創(chuàng)建 style.css
body{
background-color: red;
}
在入口文件index.js中引入
import css from './css/style.css'
打包會報錯，大致意思是你缺少對應(yīng)loader來識別下面的樣式
然后安裝 css-loader 和 style-loader
npm install css-loader style-loader -S
配置 webpack.config.js
//模塊：例如解讀css同诫，圖片粤策，html的轉(zhuǎn)換壓縮
module:{
rules: [
{
test:/\.css$/,
use:[
{loader:'style-loader'},
{loader:'css-loader'}
]
}
]
}
然后打包就成功了
css 圖片處理
我們在css里給body一個背景圖
body{
background-color: red;
background-image: url(../image/img2.png);
}
然后打包，會報錯误窖，依然是缺少解析圖片的loader叮盘，file-loader 和 url-loader
解釋下：
file-loader：解決引用路徑的問題，拿background樣式用url引入背景圖來說霹俺，我們都知道熊户，webpack最終會將各個模塊打包成一個文件，因此我們樣式中的url路徑是相對入口html頁面的吭服，而不是相對于原始css文件所在的路徑的嚷堡。這就會導(dǎo)致圖片引入失敗。這個問題是用file-loader解決的艇棕，file-loader可以解析項目中的url引入（不僅限于css）蝌戒，根據(jù)我們的配置，將圖片拷貝到相應(yīng)的路徑沼琉，再根據(jù)我們的配置北苟，修改打包后文件引用路徑，使之指向正確的文件打瘪。
url-loader：如果圖片較多友鼻，會發(fā)很多http請求，會降低頁面性能闺骚。這個問題可以通過url-loader解決彩扔。url-loader會將引入的圖片編碼，生成dataURl僻爽。相當(dāng)于把圖片數(shù)據(jù)翻譯成一串字符虫碉。再把這串字符打包到文件中，最終只需要引入這個文件就能訪問圖片了胸梆。當(dāng)然敦捧，如果圖片較大，編碼會消耗性能碰镜。因此url-loader提供了一個limit參數(shù)兢卵，小于limit字節(jié)的文件會被轉(zhuǎn)為DataURl，大于limit的還會使用file-loader進(jìn)行copy绪颖。
安裝url-loader和file-loader
npm install url-loader file-loader -S
配置 webpack.config.js
{
test: /\.(png|jpg|gif|jpeg)/,
use: [{
loader: 'url-loader',
options:
{
limit: 100000 //小于100kb 轉(zhuǎn)base64
}
}]
}
注意：只需配置 url-loader 即可秽荤，因為url-loader封裝了file-loader，
插件
html-webpack-plugin （用于模板生成html，自動引入output文件）
該插件會自動生成html入口文件并自動引入 出口 文件
安裝
npm install html-webpack-plugin -S
配置 webpack.config.js
1王滤、導(dǎo)入插件
var HtmlWebpackPlugin = require('html-webpack-plugin')
2贺嫂、實例化插件
//插件
plugins:[
new HtmlWebpackPlugin({
template:'index.html',//本地模板文件的位置
minify:{
removeAttributeQuotes:true,//去除引號
removeComments:true,//去除注釋
removeEmptyAttributes:true,//去除空屬性
collapseWhitespace:true//去除空格
}
})
]
我們將html 的引用 出口文件 的script標(biāo)簽刪掉在打包
<html>
<head>
<title></title>
</head>
<body>
<div class="warp"></div>
</body>
</html>
此時dist目錄會多出一個index.html 文件，并且此時已自動引入了出口文件雁乡，并進(jìn)行了代碼壓縮第喳、去除多余引號、去除注釋踱稍、去除空屬性曲饱、去除空格一系列操作
<!DOCTYPE html><html><head><title></title></head><body><div class=warp></div><script type=text/javascript src=main.js></script></body></html>
注意：如果不配置template 那么生成的index.html將沒有 內(nèi)容(<div class="warp"></div>)僅僅只是
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type=text/javascript src=main.js></script>
</body>
</html>
html的img
我們在index.html中引用一個圖片打包后路徑是不對的，這時就需要 html-withimg-loader珠月，來解決引用圖片路徑不對問題扩淀，
安裝 html-withimg-loader
npm install html-withimg-loader -S
配置webapck.config.js loader
{
test: /\.html$/,
use: [{
loader: 'html-withimg-loader'
}]
}
最后打包html圖片路徑問題已解決
加載字體
那么，像字體這樣的其他資源如何處理呢啤挎？file-loader 和 url-loader 可以接收并加載任何文件驻谆，然后將其輸出到構(gòu)建目錄。這就是說庆聘，我們可以將它們用于任何類型的文件胜臊，包括字體
-
下載奧森圖標(biāo) 放入 src目錄下
image.png - 入口文件 index.js中引入 font-awesome.css
import './css/font-awesome.css';
index.html里 添加個圖標(biāo)
<i class='fa fa-shield'></i>
-
打包這時候會報錯，無法識別字體伙判，需要配置loader
image.png 配置webapck.config.js
{
test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
use: [
'url-loader'
]
}
最后打包一切ok象对，
提取css
如果不想 css 打包在js里可以使用插件 extract-text-webpack-plugin
- 安裝
npm install extract-text-webpack-plugin@next -S
注意 webpack4.x要加 @naxt
- 入口文件index.js導(dǎo)入插件
var ExtractTextPlugin = require('extract-text-webpack-plugin')
- 配置webapck.config.js
- 初始化插件 傳入一個參數(shù) 打包后的css文件名
//插件
plugins: [
new HtmlWebpackPlugin({
template: 'index.html', //本地模板文件的位置
minify: {
removeAttributeQuotes: true, //去除引號
removeComments: true, //去除注釋
removeEmptyAttributes: true, //去除空屬性
collapseWhitespace: true //去除空格
}
}),
new ExtractTextPlugin("css/[name].css"),
]
- 重新配置 css-loader 和 style-loader
{
test: /\.css$/,
use: ExtractTextPlugin.extract(
{
fallback: "style-loader",
use: [
{
loader: 'css-loader',
options:
{
minimize: true, //啟用壓縮
}
}],
publicPath: "../" //解決打包后 背景圖片路徑不對問題
})
}
ES6語法裝換 babel
核心：
babel-core
功能：
babel-loader
babel-preset-env
babel-preset-react
- 下載
npm install babel-core babel-loader babel-preset-env babel-preset-react -S
babel配置有兩種方式
v1：配置webpack.config.js
{
test: /(\.jsx|\.js)$/,
use:
{
loader: "babel-loader",
options:
{
presets: ["env", 'react']
}
},
//不需要轉(zhuǎn)換的目錄
exclude: /node_modules/
}
v2：根目錄新建.babelrc文件
{
"presets":['env','react']
}
同時 webapck.conifg.js去除對應(yīng)代碼
{
test: /(\.jsx|\.js)$/,
use:
{
loader: "babel-loader",
},
//不需要轉(zhuǎn)換的目錄
exclude: /node_modules/
}
