一、npm init
生成package.json文件
二、npm install webpack webpack-cil --save-dev
安裝webpack和webpack-cli
三、新建一個src文件夾，裏面建立index.js文件
console.log(123);
webpack會自動查找src下的index.js文件，將它打包到dist文件夾裏，默認生成main.js，main.js就是打包後的文件
四、修改package.json
|
1
2
3
4
5
|
"scripts"
: {
"test"
:
"echo \"Error: no test specified\" && exit 1"
,
"dev"
:
"webpack --mode development"
,
// （開發模式）
"build"
:
"webpack --mode production"
// （生產模式）
},
|
開發模式生成的文件不壓縮javascript
生產模式生成的文件壓縮css
五、運行npm run dev和npm run build
此時，根目錄下就會多出dist文件夾，裏面有main.js文件，能夠分別運行這兩個命令，看一下生成的main.js文件的區別
六、以上這些都是默認的，固然這些能夠本身配置
新建webpack.config.js文件
|
1
2
3
4
5
6
7
8
9
|
const path = require(
"path"
)
module.exports = {
entry:
"./src/index.js"
,
// 入口
output: {
// 出口
filename:
"bundle.js"
,
// 生成打包文件的名字
path: path.join(__dirname,
"dist"
)
// 打包文件的路徑，__dirname指當前根目錄
}
}
|
此時運行npm run dev，在dist文件夾下就能看到打包生成的bundle.js文件html
七、以上是單文件入口，那若是是多文件入口吶
只需修改webpack.config.js文件
|
1
2
3
4
5
6
7
8
9
10
|
module.exports = {
entry: {
// 多文件入口
index:
"./src/index.js"
,
test:
"./src/test.js"
},
output: {
// 出口
filename:
"[name].bundle.js"
,
// 生成打包文件的名字 ==>注意這裏，由於是多文件入口，全部須要[name]來區分文件
path: path.join(__dirname,
"dist"
)
// 打包文件的路徑，__dirname指當前根目錄
}
}
|
運行npm run devjava
就能看到打包後的index.bundle.js和test.bundle.js文件，
entry也能夠寫成數組的形式
entry: ["./src/index.js", "./src/test.js"],
這個方式和對象形式結果是同樣的。
將代碼恢復，刪除掉剛剛生成的index.bundle.js和test.bundle.js文件，以及mian.js文件
八、設置webpack-dev-server
安裝 npm install webpack-dev-server --save-dev
在webpack.config.js進行配置
|
1
2
3
4
5
6
7
8
9
10
|
devServer: {
// 設置基本目錄結構
contentBase: path.join(__dirname,
"dist"
),
// 服務器的ip地址，也可使用localhost
host:
"localhost"
,
// 服務端壓縮是否開啓
compress:
true
,
// 配置服務端口號
port: 8080
}
|
修改package.json內容爲webpack
|
1
2
3
4
5
6
|
"scripts"
: {
"test"
:
"echo \"Error: no test specified\" && exit 1"
,
"serve"
:
"webpack-dev-server --mode development"
,
"dev"
:
"webpack --mode development"
,
"build"
:
"webpack --mode production"
},
|
運行npm run serveweb
成功
九、打包html文件
安裝html-webpack-plugin，它可以幫咱們插入script及link標籤
npm install html-webpack-plugin --save-dev
src下新建index.html文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<meta name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<meta http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<title>Document</title>
</head>
<body>
<div id=
"main"
>
hello
</div>
</body>
</html>
|
在webpack.config.js中進行配置npm
開頭引入插件json
|
1
|
const HtmlWebpackPlugin = require(
'html-webpack-plugin'
)
|
在plugins配置數組
|
1
2
3
4
5
6
7
8
|
plugins: [
new
HtmlWebpackPlugin({
filename:
'index.html'
,
template:
'./src/inde.html'
,
// chunks: ['index'], // 多入口時須要用到
hash:
true
// 插入的文件後面加一段隨機數
})
],
|
運行npm run serve，瀏覽器中打開localhost:8080瀏覽器
成功，此時dist文件夾下也有了index.html文件
十、打包css文件
在src下新建main.css文件
|
1
2
3
4
5
6
7
|
#main{
height: 100px;
width: 100px;
font-size: 40px;
color:
#FF6347;
}
|
須要安裝css-loader，style-loader
npm install css-loader style-loader --save-dev
webpack.config.js中配置
|
1
2
3
4
5
6
7
8
9
|
module: {
rules:[
// css loader
{
test: /\.css$/,
use: [
"style-loader"
,
"css-loader"
]
// 這裏順序不能顛倒
}
]
},
|
在入口文件index.js中引入mian.css文件
import main from './main.css'
// require('./main.css')
這兩種引入方式均可以
npm run serve
效果有了
十一、使用style-loader會將樣式內嵌到HTML中，可是咱們不但願這樣，咱們想在HTML中經過link標籤的形式引入。
使用extract-text-webpack-plugin插件分離css
安裝：
npm install extract-text-webpack-plugin --save-dev
webpack.config.dev中配置
|
1
2
3
|
new
ExtractTextPlugin({
filename:
"index.css"
,
})
|
|
1
2
3
4
5
6
7
8
9
10
11
|
rules:[
// css loader
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback:
"style-loader"
,
use:
"css-loader"
})
}
]
|
而後npm run build 打包，結果報錯
這是由於extract-text-webpack-plugin目前版本並不支持webpack4
因此安裝最新版本
npm install extract-text-webpack-plugin@next --save-dev
再次打包
npm run build，成功，此時dist文件夾裏就有了index.css文件
此時dist下的html文件中就是經過link的方式引入css的
若是在css中引入圖片打包吶
十二、css中引入圖片
在src/index.html新加一個div，class爲bg。在src/main.css中添加
|
1
2
3
4
5
|
.bg{
height: 50px;
width: 50px;
background: url(
"./img/confirm.png"
)
}
|
npm run build 打包
報錯
這是由於缺乏loader，安裝file-loader和url-loader
npm install file-loader url-loader --save-dev
配置：
|
1
2
3
4
5
6
7
8
9
10
|
// 圖片 loader
{
test: /\.(png|jpg|gif|jpeg)/,
use: [{
loader:
'url-loader'
,
options: {
limit: 500
//是把小於500B的文件打成Base64的格式，寫入JS
}
}]
}
|
npm run build 打包 ，成功
npm run serve 看下
有了
這裏配置的時候只引用了url-loader，這是由於，url-loader封裝了file-loader
url-loader工做分兩種狀況：
1.文件大小小於limit參數，url-loader將會把文件轉爲DataURL（Base64格式）；
2.文件大小大於limit，url-loader會調用file-loader進行處理，參數也會直接傳給file-loader。
也就是說，其實咱們只安裝一個url-loader就能夠了。可是爲了之後的操做方便，因此順便安裝上file-loader。
1三、html中經過img引入圖片
這時候css中引入圖片沒問題，可是在HTML文件中經過img引入圖片，會有問題，打包雖然沒有報錯，可是頁面上並無顯示圖片，控制檯能看到報錯
這是由於打包後路徑的問題。
使用html-withimg-loader來處理html引入的img圖片
安裝：
npm install html-withimg-loader --save-dev
配置
url-loader中添加
|
1
2
3
4
|
options: {
limit: 500,
//是把小於500B的文件打成Base64的格式，寫入JS
outputPath:
'images/'
//打包後的圖片放到images文件夾下
}
|
在module中添加
|
1
2
3
4
|
{
test: /\.(htm|html)$/i,
use: [
"html-withimg-loader"
]
}
|
而後npm run build，成功，可是dist文件夾中並無生成images文件夾，這是由於設置了limit，若是引用的圖片小於500k，url-loader將圖片轉換成base64格式寫入js，引入一張大的試試，再打包
能夠看到區別，1.jpg因爲超過400k，因此就被打包到了dist/images中了
1四、使用less
安裝less：
npm install less --save-dev
打包須要less-loader，再安裝less-loader：
npm install less-loader --save-dev
配置：
|
1
2
3
4
5
|
// less loader
{
test: /\.less$/,
use: [
"style-loader"
,
"css-loader"
,
"less-loader"
]
}
|
在src文件夾下建立indexless.less文件
|
1
2
3
4
5
6
|
@bgColor:
#FFA54F;
.my{
height: 100px;
width: 100px;
}
|
對應的在index.html中添加class爲my的div塊
npm run serve，瀏覽器中就能看到了
1五、分離出來less文件，像分離css文件同樣
其實和分離css文件配置基本是同樣的
|
1
2
3
4
5
6
7
8
9
10
|
// less loader
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback:
"style-loader"
,
use: [
"css-loader"
,
"less-loader"
]
}),
}
|
這時候運行npm run build 打包
看dist文件夾下生成的index.css文件
已經生成
1六、使用sass，配置大體相同
1七、自動添加CSS3屬性前綴
安裝插件：
npm install postcss-loader autoprefixer --save-dev
在根目錄下建立postcss.config.js文件
|
1
2
3
4
5
|
module.exports = {
plugins: [
require(
'autoprefixer'
)
//自動添加前綴插件
]
}
|
webpack.config.js配置
|
1
2
3
4
5
6
7
8
9
|
// css loader
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback:
"style-loader"
,
use: [
"css-loader"
,
"postcss-loader"
]
})
},
|
npm run build打包
看下對比