webpack4 的使用
文件夾名稱不要用中文, 不要有 webpack 關(guān)鍵字.
全局安裝
$ npm install webpack webpack-cli -g
初始化?
$ npm init
局部安裝(為了應(yīng)付不同版本?)
$ npm install webpack webpack-cli --save-dev
packjson
給npm 看的.
$ npm install
可以把 packjson里的依賴包全都下載.
默認(rèn)入口 是 ./src/index.js
創(chuàng)建好之后
$ webpack
生成默認(rèn)出口 ./dist/main.js
設(shè)置成 開(kāi)發(fā)環(huán)境
$ webpack --mode=development
配置基本的webpack.config.js
給webpack 看的.
// node 自帶路徑模塊.
var path = require("path");
// 模塊化導(dǎo)出格式
module.exports = {
// 配置入口文件
entry: "./src/index.js",
// 配置出口文件
output: {
// 出口文件名
filename: "main1.js",
path: path.resolve(__dirname, "dist") //__dirname 指的是根目錄.dist 設(shè)置出口文件夾.
},
// 配置 環(huán)境, 設(shè)置為開(kāi)發(fā)環(huán)境
// 導(dǎo)出的文件不是壓縮的
mode: "development"
// 設(shè)置為生產(chǎn)環(huán)境,導(dǎo)出的文件是壓縮的.
//mode : "production"
}
開(kāi)啟監(jiān)聽(tīng)
$ webpack --watch
下載服務(wù)器插件
$ npm install webpack-dev-server -D
-D 表示 --save-dev
配置相關(guān)的webpack.config.js
// 開(kāi)啟服務(wù)器時(shí),默認(rèn)打開(kāi)dist文件下的index.html
// 自動(dòng)刷新頁(yè)面
devServer : {
contentBase : "dist",
// 更改 端口
port : 9879
}
運(yùn)行 webpack-dev-server
$ webpack-dev-server
也可以用hot 只更新變化的部分.
$ webpack-dev-server --hot
webpack.config.js
css,html,img 等文件的解析
// node 自帶路徑模塊.
var path = require("path");
// 模塊化導(dǎo)出格式
module.exports = {
// 配置入口文件
entry: "./src/index.js",
// 配置出口文件
output: {
// 出口文件名
filename: "main1.js",
path: path.resolve(__dirname, "dist") //__dirname 指的是根目錄.dist 設(shè)置出口文件夾.
},
// 配置 環(huán)境變量, 設(shè)置為開(kāi)發(fā)環(huán)境
// 導(dǎo)出的文件不是壓縮的
mode: "development",
// 設(shè)置為生產(chǎn)環(huán)境,導(dǎo)出的文件是壓縮的.
//mode : "production"
// 開(kāi)啟服務(wù)器時(shí),默認(rèn)打開(kāi)dist文件下的index.html
// 自動(dòng)刷新頁(yè)面
devServer : {
contentBase : "dist",
// 更改 端口
port : 9879
},
// 應(yīng)用loader
module : {
rules : [
// css loader
{
// 正則匹配需要轉(zhuǎn)換的文件類型
test : /\.css$/,
// 使用的加載器, 順序是從右向左,css-loader 用來(lái)解析 css style-loader 用來(lái)注入style標(biāo)簽?
use :['style-loader','css-loader']
},
{
test : /\.html$/,
use : [
{// 單獨(dú)抽離的文件,進(jìn)行處理生成文件
loader : 'file-loader',
options : {
name : "index.html"
}
},
{// 單獨(dú)抽離html文件
loader : 'extract-loader'
},
{//找到 html文件
loader : 'html-loader'
}
]
},
// es6 js loader
// {
// test : /\.js$/,
// use : ["babel-loader"]
// },
// 圖片 loader 字體loader
{
test : /\.(jpg|png)$/,
use : [
{
loader : "url-loader",
options : {
//小于該大小時(shí),生成url碼,大于時(shí),生成獨(dú)立文件.
limit : 8912,
// 獨(dú)立文件的文件夾,以及名稱和格式.
name : "/img/[name].[ext]"
}
}
]
}
]
}
}
當(dāng)多個(gè)入口文件時(shí)
entry: {
main : "./src/index.js"
},
output: {
// 出口文件名 名字會(huì)變成main
filename: "[name].js",
path: path.resolve(__dirname, "dist") //__dirname
},
不用loader 用 插件 解析 html文件
npm install html-webpack-plugin -D
webpack.config.js里添加
在開(kāi)頭添加
var HtmlWebpackPlugin = require('html-webpack-plugin');
...
plugins: [
new HtmlWebpackPlugin({
// 設(shè)置title
title : "title",
// 用哪個(gè)index文件為模板,生成的index.html會(huì)自動(dòng)引入main.js
template : "./src/index.html"
})
]
需要注意的是, 這種方式加載html, 不必在 入口函數(shù)中進(jìn)行引入.
這種情況下,hmtl里引入的資源都沒(méi)有進(jìn)入 入口函數(shù)的 依賴關(guān)系里.
所以都不會(huì)被解析打包.
測(cè)試另一個(gè)插件,用來(lái)壓縮js的插件
$ npm install uglifyjs-webpack-plugin -D
webpack.config.js
文件頭部
var uglify = require("uglifyjs-webpack-plugin");
...
plugins: [
new HtmlWebpackPlugin({
// 設(shè)置title
title : "title",
template : "./src/index.html"
}),
new uglify()
]
css文件也可以抽離成獨(dú)立文件,插件
$ npm install mini-css-extract-plugin -D
webpack.config.js
文件頭部
var MiniCss = require("mini-css-extract-plugin");
css 相關(guān)loader中, 把style-loader 替換掉
{
test: /\.css$/,
use: [MiniCss.loader, 'css-loader']
},
插件調(diào)用
plugins: [
new HtmlWebpackPlugin({
// 設(shè)置title
title : "title",
template : "./src/index.html"
}),
new uglify(),
new MiniCss({
// contenthash:8 根據(jù)內(nèi)容生成八位數(shù)哈希值.
filename : "[name]_[contenthash:8].css"
})
]
我了個(gè)擦, webpack 最煩的地方是,報(bào)錯(cuò)之后,不知道問(wèn)題出在哪里,
就這一個(gè)班小時(shí)的視頻看了3,4個(gè)小時(shí)才看完,,
真的是,感覺(jué)如果不用于構(gòu)建大項(xiàng)目, 這個(gè)東西還挺費(fèi)時(shí)間的.
算了,還是再熟練熟練基本操作..
webpack.config.js
// node 自帶路徑模塊.
var path = require("path");
// 插件必須 在這里引入
var HtmlWebpackPlugin = require("html-webpack-plugin");
var uglify = require("uglifyjs-webpack-plugin");
var MiniCss = require("mini-css-extract-plugin");
// 模塊化導(dǎo)出格式
module.exports = {
// 配置入口文件
entry: {
main: "./src/index.js"
},
// 配置出口文件
output: {
// 出口文件名
filename: "[name].js",
path: path.resolve(__dirname, "dist") //__dirname 指的是根目錄.dist 設(shè)置出口文件夾.
},
// 配置 環(huán)境變量, 設(shè)置為開(kāi)發(fā)環(huán)境
// 導(dǎo)出的文件不是壓縮的
mode: "development",
// 設(shè)置為生產(chǎn)環(huán)境,導(dǎo)出的文件是壓縮的.
//mode : "production"
// 開(kāi)啟服務(wù)器時(shí),默認(rèn)打開(kāi)dist文件下的index.html
// 自動(dòng)刷新頁(yè)面
devServer: {
contentBase: "dist",
// 更改 端口
port: 9879
},
// 應(yīng)用loader
module: {
rules: [
// css loader
{
// 正則匹配需要轉(zhuǎn)換的文件類型
test: /\.css$/,
// 使用的加載器, 順序是從右向左,css-loader 用來(lái)解析 css style-loader 用來(lái)注入style標(biāo)簽?
use: [MiniCss.loader, 'css-loader']
},
// {
// test : /\.html$/,
// use : [
// {// 單獨(dú)抽離的文件,進(jìn)行處理生成文件
// loader : 'file-loader',
// options : {
// name : "index.html"
// }
// },
// {// 單獨(dú)抽離html文件
// loader : 'extract-loader'
// },
// {//找到 html文件
// loader : 'html-loader'
// }
// ]
// },
// es6 js loader
// {
// test : /\.js$/,
// use : ["babel-loader"]
// },
// 圖片 loader 字體loader
{
test: /\.(jpg|png)$/,
use: [{
loader: "url-loader",
options: {
//小于該大小時(shí),生成url碼,大于時(shí),生成獨(dú)立文件.
limit: 8912,
// 獨(dú)立文件的文件夾,以及名稱和格式.
name: "/img/[name].[ext]"
}
}]
}
]
},
plugins: [
new HtmlWebpackPlugin({
// 設(shè)置title
title : "title",
template : "./src/index.html"
}),
new uglify(),
new MiniCss({
// contenthash:8 根據(jù)內(nèi)容生成八位數(shù)哈希值.
filename : "[name]_[contenthash:8].css"
})
]
}
重來(lái)一遍
重來(lái)一遍,
-
創(chuàng)建 文件夾
git bash here
局部安裝 webpack webpack-cli
初始化 npm init
創(chuàng)建 webpack.config.js
配置入口,出口,環(huán)境變量
完,又出錯(cuò).
image.png
把mode 寫(xiě)成了 mood
試一下 js依賴.
試一下 --watch
下載 webpack-dev-server
測(cè)試啟動(dòng)一下
配置 webpack-dev-server 讓網(wǎng)頁(yè)自動(dòng)刷新
試一下 webpack-dev-server --hot
測(cè)試 打包 css
創(chuàng)建,css文件,
下載 css-loader, style-loader
main, 引入依賴
完,報(bào)錯(cuò)
應(yīng)該是沒(méi)有配置loader
配置loader
還是報(bào)同樣的錯(cuò)
找到問(wèn)題
引入css時(shí)寫(xiě)錯(cuò)
把 require("demo.css"); 改成 require("./demo.css");
不能沒(méi)有./,路徑不能簡(jiǎn)化.
測(cè)試把html 打包
下載 file-loader, html-loader, extract-loader
創(chuàng)建 html文件
配置 html文件
出錯(cuò), 頁(yè)面沒(méi)有正常渲染
沒(méi)有在main.js 中引入 html文件
引入文件
又報(bào)錯(cuò)
又犯了同樣的錯(cuò)誤
引入文件時(shí),路徑填寫(xiě)不準(zhǔn)確.
把 require("index.html"); 改成 require("./index.html");
還是沒(méi)有按照預(yù)期渲染, css似乎沒(méi)起作用.
發(fā)現(xiàn) 之前引入的 math.js 也沒(méi)有起作用.
哦,明白了,
我沒(méi)有在 index.html當(dāng)中引入 生成后的mani.js
尼瑪..
測(cè)試 加載圖片模塊
粘貼兩個(gè)圖片到 ./ src/img文件夾里
下載 url-loader
配置 url-loader
讓img 抽離成獨(dú)立文件.
測(cè)試 加載 html web-pack-plugin
下載 web-pack-plugun
在 config.js中 引入
在plugins 中 new
需要把 html 相關(guān)loader 配置刪除
報(bào)錯(cuò)
new HtmlWebpackPlugin(); 不能有冒號(hào)..低級(jí)錯(cuò)誤
報(bào)錯(cuò),
需要把 在 main.js中 引入的html 給刪掉.
配置,生成的html 和我自己寫(xiě)的一樣,
有個(gè)預(yù)期的錯(cuò)誤,
即,在html中img標(biāo)簽引入的圖片找不到,
因?yàn)闆](méi)有進(jìn)入main.js的打包過(guò)程,就不會(huì)產(chǎn)出相關(guān)的文件.
測(cè)試 下載 uglifyjs-loader 壓縮js代碼
下載 uglifyjs-loader
(這插件名字起的很逗啊, 不是丑的意思嘛?,壓縮后確實(shí)難看了也對(duì).)
報(bào)錯(cuò) 應(yīng)該是名字輸入錯(cuò)了
不是npm install uglifyjs-loader -D
而是 npm install uglifyjs-webpack-plugin -D
配置 uglify
先引入 后實(shí)例
發(fā)現(xiàn)一個(gè)問(wèn)題,
我的js代碼會(huì)執(zhí)行兩次,
原因是,我的src/index.html里引入了main.js
而 Htmlwebpackplugin 生成的 index.html 也會(huì)默認(rèn) 引入main.js
引入兩次,導(dǎo)致執(zhí)行兩次.
測(cè)試,把css 獨(dú)立出來(lái).
下載插件 npm install mini-css-extract-plugin -D
把依賴干掉?
頭部引入
用minicss.loader 替換掉 style-loader
實(shí)例化 new Minicss()
設(shè)置 文件名.
報(bào)錯(cuò),
引入插件時(shí),名字寫(xiě)錯(cuò)了
不是 mini-css-webpack-plugin
而是mini-css-extract-plugin
出了問(wèn)題,
沒(méi)有生成獨(dú)立的css文件,
原因是, 需要將 css文件 在main.js中引入.
這與html的插件不同,html的插件是,用插件就不要引入,
而css這個(gè)插件,需要引入,還需要更改 style-loader
在今天結(jié)束前開(kāi)始來(lái)第三次.
我們稍微換一下思路.
我們把需要安裝的loader 和 plugin
也就是這個(gè) package.json 先保存下來(lái).
用npm install 來(lái)試一下.
創(chuàng)建文件夾
git bash here
npm init
在package.json里
添加要安裝的項(xiàng)目.
"devDependencies": {
"css-loader": "^1.0.1",
"extract-loader": "^3.0.0",
"file-loader": "^2.0.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.5",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "^2.0.1",
"url-loader": "^1.1.2",
"webpack-dev-server": "^3.1.10"
},
npm install
不知道怎樣才算是成功
創(chuàng)建 webpack.config.js
設(shè)置入口,出口,環(huán)境變量
創(chuàng)建入口文件,
咦? 我們發(fā)現(xiàn)package.json 里的依賴項(xiàng)當(dāng)中, 是沒(méi)有webpack webpack-cli 的
應(yīng)該是不能通過(guò) 這種方式安裝
安裝 webpack webpack-cli -D
測(cè)試webpack
測(cè)試 js 文件依賴.
測(cè)試 webpack --watch
測(cè)試 webpack-dev-server
配置 webpack-dev-server
測(cè)試是否會(huì)自動(dòng)刷新.
出錯(cuò).
寫(xiě)成了
devServer : {
contBase : "dist",
port : 9876
}
應(yīng)該改成
devServer : {
contentBase : "dist",
port : 9876
}
測(cè)試 webpack-dev-server --hot
測(cè)試依賴一個(gè) css
配置 css-loader style-loader
測(cè)試依賴一個(gè)html
配置 html-loader extract-loader file-loader
測(cè)試 加入兩個(gè)圖片.
配置 url-loader
報(bào)錯(cuò),似乎是語(yǔ)法錯(cuò)誤
沒(méi)放進(jìn)對(duì)象的緣故.
測(cè)試,用htmlwebpackplugin 獨(dú)立出 html文件.
報(bào)錯(cuò),html 解析失敗
路徑問(wèn)題
不應(yīng)該是
template : "./index.html"
而是
template : "./src/index.html"
此處要填寫(xiě)的是 config.js 和 index.html 之間的相對(duì)路徑.
html中 img標(biāo)簽沒(méi)有進(jìn)入 打包之中, 所以會(huì)引入失敗.
但這要怎么解決呢?
還是說(shuō)用 file-loader 這種方式更方便?
測(cè)試,js 壓縮代碼插件
報(bào)錯(cuò),應(yīng)該是插件名稱寫(xiě)錯(cuò)了.
測(cè)試 mini-css-extract-plugin 獨(dú)立css 文件
第三次基本操作完成.感覺(jué)確實(shí)好多了.
特別是,通過(guò)packjson.的方式批量下載 npm包 比一個(gè)一個(gè)下要節(jié)省相當(dāng)多的時(shí)間.
但這種方式,應(yīng)該注意要把不需要的都去掉.
現(xiàn)在感覺(jué),只要能很好的看懂 package.json 和 webpack.config.js 的內(nèi)容的話,
實(shí)際上配置的時(shí)候,只需要進(jìn)行復(fù)制粘貼就可以了.
webpack 個(gè)人覺(jué)得最明顯 過(guò)癮的地方是,
似乎,我擁有了全世界的包.哈哈哈,
現(xiàn)在弄兩個(gè)額外的任務(wù).
1.把今天的package.json 里的內(nèi)容, 以及 webpack.config.js的內(nèi)容,
制成 代碼提示.這樣比復(fù)制粘貼稍微方便一點(diǎn).
- 我們?cè)囈幌?scss loader的配置.
1.失敗,似乎 hbuilder 對(duì) 代碼提示的長(zhǎng)度是有所限制的.
方法是把一個(gè)文件分割成好多個(gè), 我分了5個(gè)都不行, 這就沒(méi)意思了.
2.成功, 參照
webpack4.x 處理less、sass文件,分離編譯后的css，自動(dòng)添加css前綴,自動(dòng)消除冗余css 第七節(jié);
稍作改動(dòng),在loader里添加
{
test : /\.s(c|a)ss$/,
use : [MiniCss.loader,"css-loader","sass-loader"]
},
在main.js中引入
require("./scss/demo1.scss");
花了將近一天的時(shí)間打了三次webpack , 希望是值得的.
報(bào)錯(cuò)
應(yīng)該是入口寫(xiě)錯(cuò)了.
main : "./src/mian.js" 改成 main : "./src/main.js"
測(cè)試 js文件依賴
疑問(wèn),
在package.json里
如果
"devDependencies": {
"webpack": "^4.26.1",
"webpack-cli": "^3.1.2",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
}
寫(xiě)成
"devDependencies": {
"webpack",
"webpack-cli",
"babel-core",
"babel-loader"
}
然后 npm install 他會(huì)幫我正常安裝嘛?
"devDependencies": {
"webpack": "^3",
如果寫(xiě)成這樣呢?
}
測(cè)試html
報(bào)錯(cuò)
,應(yīng)該是options寫(xiě)錯(cuò)了
運(yùn)行報(bào)錯(cuò),
原因是, html當(dāng)中引入的應(yīng)該是生成后的 js, 而不是 src 里的js,
測(cè)試兩個(gè)圖片
測(cè)試 圖片獨(dú)立成文件.
報(bào)錯(cuò)
沒(méi)有生成文件.
我勒個(gè)去,
因?yàn)槲也恍⌒陌?src 里的 img給刪掉了.
測(cè)試, 用 html-webpack-plugin
獨(dú)立 html 文件.
報(bào)錯(cuò)
哦明白了,main.js中不能引入html
測(cè)試 js 代碼壓縮.
css 分包
測(cè)試 mini-css
測(cè)試 scss
報(bào)錯(cuò),
new MiniCssExtractPlugin({
filename : "./css/[name]_[contenthash:8].css"
})
放進(jìn) css文件夾里之后,
圖片資源路徑找不到了.
我們分析一下.
我在 scss 當(dāng)中的 引入的圖片路徑是這樣的.
url(../img/3test.jpg);
是基于src/scss文件的 圖片的相對(duì)路徑.
當(dāng)然我設(shè)置的正好和 dist/scss當(dāng)中的相對(duì)路徑是一樣的.
我們這樣測(cè)試,
先把 miniCss 路徑改回來(lái).
new MiniCssExtractPlugin({
filename : "[name]_[contenthash:8].css"
})
然后把文件放入,src/scss/scss
引入相對(duì)路徑,看看會(huì)怎么樣.
成功, 表明, 確實(shí)要填寫(xiě)src里的路徑關(guān)系.
剛才發(fā)現(xiàn),忘了在 main.js 中引入 scss文件,
把文件引入后,我們?cè)僦匦聹y(cè)試上面的問(wèn)題.
不是因?yàn)闆](méi)有引入依賴,一樣是這個(gè)問(wèn)題.
測(cè)試,我們把引入放在 css文件上.
還是同樣的報(bào)錯(cuò).
假設(shè)是這樣的,
本來(lái)生成的文件的路徑,都是相對(duì) output 當(dāng)中的path的,也就是 ./dist
minicss 讓生成的 css 文件都 相對(duì) ./dist/css?
百度一下
mini-css-extract-plugin;
看文檔推測(cè),
不要在 插件filename上 設(shè)置要存放的文件夾,
而是放在loader里.
rules: [{
test: /\.css$/,
use: [{
loader: MiniCss.loader,
publicPath: "./dist/css"
},
"css-loader"
],
},
報(bào)錯(cuò),一般是配置選項(xiàng)錯(cuò)了.
還是不行,首先不會(huì)幫我創(chuàng)建 css 文件夾.
但有這個(gè)效果.
也就是說(shuō), 這個(gè)文件到底在哪里創(chuàng)建由 mini 來(lái)決定,
但里面的資源文件相對(duì)于誰(shuí),可以用 publicPath 來(lái)決定?
測(cè)試一下
{
test: /\.css$/,
use: [{
loader: MiniCss.loader,
options : {
publicPath: "./dist/"
}
},
"css-loader"
],
},
....
new MiniCss({
filename: "./css/[name]_[contenthash:8].css"
})
文件確實(shí)是在指定的文件夾下產(chǎn)生了,
但還是報(bào)錯(cuò)
很浪費(fèi)時(shí)間, 一個(gè)小時(shí)有了,,
百度吧,,
算了先保留
