1、npm init
生成package.json文件
2、npm install webpack webpack-cil --save-dev
安裝webpack和webpack-cli
3、新建一個src文件夾，里面創建index.js文件
console.log(123);
webpack會自動查找src下的index.js文件，將它打包到dist文件夾里，默認生成main.js，main.js就是打包后的文件
4、修改package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development", // （開發模式）
"build": "webpack --mode production" // （生產模式）
},
開發模式生成的文件不壓縮
生產模式生成的文件壓縮
5、運行npm run dev和npm run build
此時，根目錄下就會多出dist文件夾，里面有main.js文件，可以分別運行這兩個命令，看一下生成的main.js文件的區別
6、以上這些都是默認的，當然這些可以自己配置
新建webpack.config.js文件
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文件
7、以上是單文件入口，那如果是多文件入口吶
只需修改webpack.config.js文件
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 dev
就能看到打包后的index.bundle.js和test.bundle.js文件，
entry也可以寫成數組的形式
entry: ["./src/index.js", "./src/test.js"],
這個方式和對象形式結果是一樣的。
將代碼恢復，刪除掉剛剛生成的index.bundle.js和test.bundle.js文件，以及mian.js文件
8、設置webpack-dev-server
安裝 npm install webpack-dev-server --save-dev
在webpack.config.js進行配置
devServer: {
// 設置基本目錄結構
contentBase: path.join(__dirname, "dist"),
// 服務器的ip地址，也可以使用localhost
host: "localhost",
// 服務端壓縮是否開啟
compress: true,
// 配置服務端口號
port: 8080
}
修改package.json內容為
"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 serve
成功
9、打包html文件
安裝html-webpack-plugin，它能夠幫我們插入script及link標簽
npm install html-webpack-plugin --save-dev
src下新建index.html文件
<!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中進行配置
開頭引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
在plugins配置
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/inde.html',
// chunks: ['index'], // 多入口時需要用到
hash: true // 插入的文件后面加一段隨機數
})
],
運行npm run serve，瀏覽器中打開localhost:8080
成功，此時dist文件夾下也有了index.html文件
10、打包css文件
在src下新建main.css文件
#main{
height: 100px;
width: 100px;
font-size: 40px;
color: #FF6347;
background-color: pink;
}
需要安裝css-loader，style-loader
npm install css-loader style-loader --save-dev
webpack.config.js中配置
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
效果有了
11、使用style-loader會將樣式內嵌到HTML中，但是我們不希望這樣，我們想在HTML中通過link標簽的形式引入。
使用extract-text-webpack-plugin插件分離css
安裝：
npm install extract-text-webpack-plugin --save-dev
webpack.config.dev中配置
new ExtractTextPlugin({
filename: "index.css",
})
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中引入圖片打包吶
12、css中引入圖片
在src/index.html新加一個div，class為bg。在src/main.css中添加
.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
配置：
// 圖片 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。
13、html中通過img引入圖片
這時候css中引入圖片沒問題，但是在HTML文件中通過img引入圖片，會有問題，打包雖然沒有報錯，但是頁面上並沒有顯示圖片，控制台能看到報錯
這是因為打包后路徑的問題。
使用html-withimg-loader來處理html引入的img圖片
安裝：
npm install html-withimg-loader --save-dev
配置
url-loader中添加
options: {
limit: 500, //是把小於500B的文件打成Base64的格式，寫入JS
outputPath: 'images/' //打包后的圖片放到images文件夾下
}
在module中添加
{
test: /\.(htm|html)$/i,
use: ["html-withimg-loader"]
}
然后npm run build，成功，但是dist文件夾中並沒有生成images文件夾，這是因為設置了limit，如果引用的圖片小於500k，url-loader將圖片轉換成base64格式寫入js，引入一張大的試試，再打包
可以看到區別，1.jpg由於超過400k，所以就被打包到了dist/images中了
14、使用less
安裝less：
npm install less --save-dev
打包需要less-loader，再安裝less-loader：
npm install less-loader --save-dev
配置：
// less loader
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"]
}
在src文件夾下創建indexless.less文件
@bgColor: #FFA54F;
.my{
height: 100px;
width: 100px;
background-color: @bgColor;
}
對應的在index.html中添加class為my的div塊
npm run serve，瀏覽器中就能看到了
15、分離出來less文件，像分離css文件一樣
其實和分離css文件配置基本是一樣的
// less loader
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "less-loader"]
}),
}
這時候運行npm run build 打包
看dist文件夾下生成的index.css文件
已經生成
16、使用sass，配置大致相同
17、自動添加CSS3屬性前綴
安裝插件：
npm install postcss-loader autoprefixer --save-dev
在根目錄下創建postcss.config.js文件
module.exports = {
plugins: [
require('autoprefixer') //自動添加前綴插件
]
}
webpack.config.js配置
// css loader
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "postcss-loader"]
})
},
npm run build打包
看下對比
