webpack安裝前提條件:
安裝node.js環(huán)境
webpack安裝過(guò)程:
npm install -g webpack? 安裝webpack到全局環(huán)境中(缺點(diǎn):webpack官方不建議安裝到全局,這樣會(huì)影響項(xiàng)目菇晃,如果之前的項(xiàng)目使用的是webpack低版本,那會(huì)導(dǎo)致低版本使用了安裝在全局環(huán)境中的webpack版本)
webpack安裝到局部環(huán)境(注意:項(xiàng)目目錄名稱不能是webpack關(guān)鍵字)
1.cd 進(jìn)入項(xiàng)目目錄
2.npm init(初始化環(huán)境,默認(rèn)需要填寫一堆基本信息)
3.npm install --save-dev webpack(使用--save-dev是開發(fā)環(huán)境,如果需要使用生產(chǎn)環(huán)境則直接使用--save)
webpack打包項(xiàng)目過(guò)程(以下目錄都要有的目錄)
1.dist(用于生產(chǎn)環(huán)境让腹,也就是打包后的文件目錄)
2.src(用戶開發(fā)環(huán)境蜓斧,也就是書寫的代碼都放在此目錄下)
3.在dist目錄下新建一個(gè)index.html文件并在里面書寫html代碼,同時(shí)在結(jié)尾加上一段<script src="./bundle.js"></script>
4.在src目錄下新建一個(gè)entery.js并寫入document.getElementById("title").innerHTML = "Hello World";? (其中entery.js為入口文件)
5.命令行使用webpack src/entery.js dist/bundle.js? (解析:webpack 要打包的文件? 打包后的目標(biāo)文件睬涧,webpack最新版需要使用webpack -o 要打包的文件? 打包后的目標(biāo)文件)
6.安裝live-server(nmp install -g live-server)
7.運(yùn)行l(wèi)ive-server會(huì)打開瀏覽器進(jìn)行預(yù)覽
△真正項(xiàng)目上不是上面這樣用,上面是簡(jiǎn)單的做一下打包旗唁,下面是在項(xiàng)目中會(huì)用到的方式進(jìn)行打包的過(guò)程
注意:要使用webpack.conf.js配置文件,需要在package.js中的scripts選項(xiàng)加入"build": "webpack --config webpack.conf.js",然后直接使用npm run build即可進(jìn)行打包
1.在項(xiàng)目根目錄下新建webpack.conf.js,該文件里的內(nèi)容:
//引入node的path模塊
const path=require("path");
module.exports={
? ? //入口配置項(xiàng)
? ? entry:{
? ? ? ? //入口文件路徑
? ? ? ? index1:path.join(__dirname, "./src/index1.js"),
? ? ? ? index2:path.join(__dirname, "./src/index2.js"),
? ? },
? ? //出口配置項(xiàng)
? ? output:{
? ? ? ? //輸入的目標(biāo)路徑
? ? ? ? filename: "[name].bundle.js",
? ? ? ? path:path.resolve(__dirname, "dist")
? ? },
? ? //模塊配置項(xiàng)
? ? module:{},
? ? //插件配置項(xiàng)
? ? plugins:[],
? ? //webpack開發(fā)服務(wù)項(xiàng)
? ? devServer:{}
}
△webpack的熱更新
1.在webpack.conf.js的devServer中加入以下參數(shù):
devServer:{
? ? //需要熱更新的目錄路徑
? ? contentBase:path.resolve(__dirname, "dist"),
? ? //熱更新訪問地址
? ? host:"192.168.3.10",
? ? //熱更新端口
? ? port:1717,
? ? //熱更新是否壓縮(服務(wù)器端)
? ? compress:true
}
2.使用熱更新需要環(huán)境中安裝webpack-dev-server服務(wù),如果該服務(wù)需要安裝到當(dāng)前項(xiàng)目中,直接使用nmp install webpack-dev-server --save-dev(開發(fā)環(huán)境,--save安裝到上線環(huán)境),
安裝完成之后,需要在目錄中的package.json中的scripts選項(xiàng)中配置一個(gè)別名
"dev": "webpack-dev-server --config webpack.conf.js"
3.運(yùn)行npm run dev,
如果不這樣配置會(huì)報(bào)錯(cuò)畦浓,說(shuō)找不到入口(完成后,直接訪問http://192.168.3.10:1717即可,就可以完成熱更新操作)
△打包CSS3文件
1.打包c(diǎn)ss文件需要安裝style-loader、css-loader模塊(執(zhí)行npm install style-loader --save-dev检疫、npm install css-loader --save-dev)
2.在入口文件所在目錄中新建css文件夾并在該文件夾中新建樣式文件,然后在入口js文件中使用import css from 路徑(該路徑必須為相對(duì)路徑)
3.在webpack.conf.js文件的modules選項(xiàng)中配置如下參數(shù):
rules:[
? ? ? ? ? ? {
? ? ? ? ? ? ? ? //正則表達(dá)式,匹配對(duì)應(yīng)后綴名的文件
? ? ? ? ? ? ? ? test:/\.css$/,
? ? ? ? ? ? ? ? //使用什么loader模塊進(jìn)行打包
? ? ? ? ? ? ? ? use:['style-loader', 'css-loader']
? ? ? ? ? ? }
? ? ? ? ]
例外兩種寫法:
rules:[
? ? ? ? ? ? {
? ? ? ? ? ? ? ? //正則表達(dá)式,匹配對(duì)應(yīng)后綴名的文件
? ? ? ? ? ? ? ? test:/\.css$/,
? ? ? ? ? ? ? ? //使用什么loader模塊進(jìn)行打包
? ? ? ? ? ? ? ? loader:['style-loader', 'css-loader']
? ? ? ? ? ? }
? ? ? ? ]
rules:[
? ? ? ? ? ? {
? ? ? ? ? ? ? ? //正則表達(dá)式,匹配對(duì)應(yīng)后綴名的文件
? ? ? ? ? ? ? ? test:/\.css$/,
? ? ? ? ? ? ? ? //使用什么loader模塊進(jìn)行打包
? ? ? ? ? ? ? ? loader:[{
? ? ? ? ? ? ? ? ? ? loader:"style-loader"
? ? ? ? ? ? ? ? },{
? ? ? ? ? ? ? ? ? ? loader:"css-loader"
? ? ? ? ? ? ? ? }]
? ? ? ? ? ? }
? ? ? ? ]
△打包壓縮js文件
1.執(zhí)行npm install uglifyjs-webpack-plugin --save-dev進(jìn)行安裝并保存到package.json中
2.在webpack.conf.js頂部中引入:
const uglify = require("uglifyjs-webpack-plugin");
3.plugins中寫上new uglify();
4.執(zhí)行打包指令進(jìn)行打包
△打包html文件
1.執(zhí)行npm install html-webpack-plugin --save-dev
2.在webpack.conf.js中引入const htmlPlugin = require('html-webpack-plugin');
3.將原來(lái)在dist目錄下的index.html剪切到src目錄下并將index.html文件中引入的js文件去掉(因?yàn)榇虬鰜?lái)的文件webpack會(huì)自動(dòng)引入js文件宅粥,無(wú)須我們手動(dòng)添加)
4.在webpack.conf.js中的plugins屬性中輸入如下:
new htmlPlugin({
? ? minify:{
? ? ? ? //去掉html文件中引號(hào)(單引號(hào)、雙引號(hào)都會(huì)去除)
? ? ? ? removeAttrubuteQuotes:true
? ? },
? ? //防止js文件有緩存电谣,所以會(huì)在js文件后加入?hash值(熱更新的時(shí)候hash值會(huì)改變)
? ? hash:true,
? ? //需要打包的html文件
? ? template:"./src/index.html"
});
△CSS文件中的圖片處理
1.執(zhí)行npm install file-loader url-loader --save-dev , (這兩個(gè)是解析圖片用的loader,這兩個(gè)loader只需要引入url-loader即可,以為url-loader里已經(jīng)包含了file-loader,他們之間會(huì)自動(dòng)轉(zhuǎn)換)
2.在webpack.conf.js中module中添加(如果圖片小于limit的大小會(huì)把圖片轉(zhuǎn)成base64的格式打包進(jìn)js中,如果大于limit會(huì)直接把圖片放入dist目錄中,outputPath指的是超出limit大小會(huì)把圖片放到該目錄下,并將該路徑打包到j(luò)s文件中):
module:{
? ? rules:[{
? ? ? ? test:/\.(png|jpg|gif)$/,
? ? ? ? use:[{
? ? ? ? ? ? loader:"url-loader",
? ? ? ? ? ? options:{
? ? ? ? ? ? ? ? limit:500000,
? ? ? ? ? ? ? ? outputPath:'images/'
? ? ? ? ? ? }
? ? ? ? }]
? ? }]
}
3:在src下新建一個(gè)images文件夾,并把背景圖片bg.jpg放入該文件夾中
4:在src/css/style.css文件中設(shè)置一個(gè)背景圖片:
body{
? ? background:url(../images/bg.jpg) no-repeat;
}
5.運(yùn)行l(wèi)ive-server查看結(jié)果
△解決圖片路徑問題
1.運(yùn)行npm install extract-text-webpack-plugin --save-dev
2.定義const extractTextPlugin = require("extract-text-webpack-plugin");
3.在webpack.conf.js定義一個(gè)變量(這里的地址需要定義成devServer上的地址和端口)
var websit = {
? ? publicPath:"http://127.0.0.1:8080"
};
4.在webpack.conf.js中出口文件配置output選項(xiàng)中加入:
publicPath:website.publicPath
4.webpack.conf.js中將module中的值:
rules:[
? ? {
? ? ? ? test:/\.css$/,
? ? ? ? use: extractTextPlugin.extract({
? ? ? ? ? ? fallback: "style-loader",
? ? ? ? ? ? use: "css-loader"
? ? ? ? ? ? })
? ? }
]
5.webpack.conf.js中plugins的值增加(意思就是將抽離出來(lái)的css文件放入dist目錄下的css文件夾中):
new extractTextPlugin("css/style.css")
4.然后打包,會(huì)發(fā)現(xiàn)打包出來(lái)的index.html中的路徑會(huì)變成絕對(duì)路徑
注意:安裝extract-text-webpack-plugin,如果webpack版本小于4.0可以直接使用npm install extract-text-webpack-plugin --save-dev進(jìn)行安裝,
如果是webpack4.0之后的版本需要使用npm install extract-text-webpack-plugin@next --save-dev進(jìn)行安裝即可
△解決html圖片的問題
1.運(yùn)行npm install html-withimg-loader --save-dev
2.在webpack.conf.js中的module加入:
{
? ? test: /\.(htm|html)$/i,
? ? use:[ 'html-withimg-loader']
}
3.在src/index.html加入<img src="./images/bg.js"/>
4.運(yùn)行打包操作,打包完成后會(huì)發(fā)現(xiàn)src的url也會(huì)打進(jìn)去了
注意:此模塊要結(jié)合extract-text-webpack-plugin進(jìn)行使用秽梅,就可以解決圖片的路徑問題
△分離less文件到css文件中
1.運(yùn)行npm install less less-loader --save-dev
2.在src/css目錄下新建style.less文件,寫入:
@bgcolor:red;
#div-title{
? ? width:100px;
? ? height:100px;
? ? background-color:@bgcolor;
}
3.在入口文件(index.js)中引入該less文件:import less from "./css/style.less";
4.在webpack.conf.js中module中將加入:
{
? ? test:/\.(less)$/,
? ? use: extractTextPlugin.extract({
? ? ? ? fallback: "style-loader",
? ? ? ? use: extractTextPlugin.extract({
? ? ? ? ? ? fallback: "style-loader",
? ? ? ? ? ? use: [{
? ? ? ? ? ? ? ? loader:"css-loader"
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? loader:"less-loader"
? ? ? ? ? ? }]
? ? ? ? })
? ? })
}
5.打包測(cè)試
注意:less打包也需要配合extract-text-webpack-plugin進(jìn)行使用與輸出
△分離sass文件到css文件中
sass中分兩種語(yǔ)法:
sass語(yǔ)法:不能帶大括號(hào)、分號(hào)剿牺,不然會(huì)出現(xiàn)語(yǔ)法錯(cuò)誤企垦,如,
#abc
? ? width: 100px
? ? height: 100px
注意:width: 100px中:后必須要有空格否則會(huì)出現(xiàn)語(yǔ)法錯(cuò)誤晒来,這點(diǎn)值得注意
scss語(yǔ)法:跟原來(lái)css寫法一樣
1.運(yùn)行npm install node-sass sass-loader --save-dev
2.在src/css目錄下新建style.scss文件,寫入:
$fontColor:red;
#div-title{
? ? color:$fontColor;
}
3.在入口文件(index.js)中引入該sass文件:import sass from "./css/style.scss";
4.在webpack.conf.js中module中將加入:
{
? ? test:/\.(sass|scss)$/,
? ? use: extractTextPlugin.extract({
? ? ? ? fallback: "style-loader",
? ? ? ? use: extractTextPlugin.extract({
? ? ? ? ? ? fallback: "style-loader",
? ? ? ? ? ? use: [{
? ? ? ? ? ? ? ? loader:"css-loader"
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? loader:"sass-loader"
? ? ? ? ? ? }]
? ? ? ? })
? ? })
}
5.打包測(cè)試
注意:sass打包也需要配合extract-text-webpack-plugin進(jìn)行使用與輸出
△給需要css3屬性加上前綴
1.執(zhí)行npm install postcss-loader autoprefixer --save-dev
2.在項(xiàng)目根目錄下新建名為postcss.config.js文件,并在里面寫入:
module.exports={
? ? plugins:[
? ? ? ? //安裝的插件名稱
? ? ? ? require("autoprefixer")
? ? ]
}
3.在webpack.conf.js的module的rules下.css規(guī)則下加入:
{
? ? loader:"postcss-loader"
}
這種寫法可以在后面加入其它參數(shù)選項(xiàng),還可以使用這種方式:
"postcss-loader"
4.在.css文件中加入存在兼容問題的屬性:
transform: rotate(45deg);
appearance: none;
5.打包測(cè)試
注意:如果打包沒問題钞诡,一般css文件中就會(huì)自動(dòng)給需要加前綴的屬性加上前綴,如:
-webkit-transform: rotate(45deg);
? ? ? ? transform: rotate(45deg);
-webkit-appearance: none;
? ? -moz-appearance: none;
? ? ? ? appearance: none;
△刪除沒用使用過(guò)的css樣式(冗余樣式)
1.執(zhí)行npm install purifycss-webpack purify-css --save-dev(--save-dev等價(jià)于-D)
2.在webpack.conf.js文件中加入:
const glob = require("glob");
const PurifyCSSPlugin = require("purifycss-webpack");
3.在webpack.conf.js的plugins中加入:
new PurifyCSSPlugin({
? ? //通過(guò)這個(gè)插件檢索src下所有html文件沒有使用到的css屬性進(jìn)行刪除
? ? paths:glob.sync(path.join(__dirname, "src/*.html"))
})
4.打包測(cè)試
△使用devtool進(jìn)行調(diào)試
在webpack.conf.js中加入?yún)?shù):
devtool:'cheap-source-map'
具體的參數(shù)值參考https://blog.csdn.net/qq_39963971/article/details/78218970
△引入jquery
方法一(局部引入):
1.執(zhí)行npm install jquery --save-dev
2.在入口文件引入jquery
import $ from 'jquery';
3.使用jquery進(jìn)行常規(guī)操作即可
方法二(全局引入):
1.執(zhí)行npm install jquery --save-dev
2.在webpack.conf.js中引入
const webpack = require('webpack');
3.在webpack.conf.js的plugins中使用:
new webpack.ProvidePlugin({
? ? ? ? $:"jquery"
? ? })
4.使用jquery進(jìn)行常規(guī)操作即可
△使用BannerPlugin聲明版權(quán)信息
1.在webpack.conf.js中引入webpack:
const webpack = require("webpack");
2.在webpack.conf.js中plugins中聲明版權(quán)信息:
new webpack.BannerPlugin('JS版權(quán)所有湃崩,看官方免費(fèi)視頻到j(luò)s.com收看')
△使用ProvidePlugin引入插件
1.執(zhí)行npm install jquery --save-dev
2.webpack.conf.js中entry中加入:
jquery:'jquery'
2.在webpack.conf.js中引入webpack
const webpack = require("webpack");
3.在webpack.conf.js的entry中引用:
jquery:'jquery'
4.在webpack.conf.js的plugins中引入插件:
//(4.0之前版本)
new webpack.optimize.CommonsChunkPlugin({
? ? //name對(duì)應(yīng)入口文件中的名字荧降,我們起的是jQuery,多個(gè)插件用['jquery', 'vue']
? ? name:'jquery',
? ? //把文件打包到哪里,是一個(gè)路徑,多個(gè)插件用filename:"dist/js/[name].js",
? ? filename:"dist/js/jquery.js",
? ? //最小打包的文件模塊數(shù)攒读,這里直接寫2就好
? ? minChunks:2
})
//(4.0版本之后),要與entry和devServer平級(jí)
optimization:{
? ? ? ? splitChunks:{
? ? ? ? ? ? cacheGroups:{
? ? ? ? ? ? ? ? commons:{
? ? ? ? ? ? ? ? ? ? name:'jquery',
? ? ? ? ? ? ? ? ? ? filename:"dist/js/jquery.js",
? ? ? ? ? ? ? ? ? ? minChunks:2
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? //如果抽離多個(gè)類庫(kù)寫在這里
? ? ? ? ? ? }
? ? ? ? }
? ? }
△靜態(tài)資源集中輸出
1.執(zhí)行npm install copy-webpack-plugin --save-dev
2.在webpack.conf.js引入安裝好的插件
const copyWebpackPlugin = require("copy-webpack-plugin");
3.在webpack.conf.js中plugins中引入:
new copyWebpackPlugin([{
? ? //需要打包的目錄
? ? from: __dirname + "/src/public",
? ? //目標(biāo)目錄,使用相對(duì)路徑即可,相對(duì)于打包后的路徑
? ? to: "./public"
}])
4.在項(xiàng)目根目錄下新建public目錄,隨便新建一個(gè)文件,進(jìn)行打包測(cè)試
△引入json文件
1.在src下新建一個(gè)文件名叫config.json,內(nèi)容為:
{
? ? "name":"張三",
? ? "age":24,
? ? "sex":"男"
}
2.在入口文件使用:
var json = require("./config.json");
3.使用alert打印json里的屬性
△啟動(dòng)webpack中的熱更新
1.在webpack.conf.js引入:
const webpack = require("webpack");
2.在webpack.conf.js中的plugins加入:
new webpack.HotModuleReplacementPlugin()