webpack配置
? webpack主要是打包戈鲁，所以其核心存在兩個(gè)部分恬砂，入口和出口帚称，你可以把webpack加工想象成香腸加工廠官研，就是活豬進(jìn)去，香腸出來的那種闯睹，但是如果每次加工都需要員工親力親為阀参，那多麻煩那，所以我們考慮到了自動(dòng)化配置瞻坝。webpack存在功能類似的配置文件蛛壳，讓webpack通過配置，全自動(dòng)的執(zhí)行我們需要的編譯操作所刀。
? ok衙荐，我們想象一下webpack需要配置的有哪些，你可以盡情想象你是一個(gè)加工廠的小老板浮创，此時(shí)正在配置你的香腸工廠忧吟，怎么配置最合適那？
? webpack分成四個(gè)部分斩披，期中最核心的就是入口和出口溜族，當(dāng)然在入口和出口配置的同時(shí)我們還需要一些加載器和插件讹俊，這就是我們所謂的webpack配置文件。這個(gè)配置文件我們習(xí)慣把其命名為webpack.config.js 煌抒，還有webpackfile.js 仍劈，為啥叫這個(gè)名字？ 因?yàn)樯衔奶岬搅艘粋€(gè)叫做 help大法還記得不寡壮？
可以清楚的看到贩疙，這個(gè)配置文件的來源，webpack官方規(guī)定的况既。
? ok这溅，在當(dāng)前項(xiàng)目根目錄下建立了這么一個(gè)文件之后，我們馬上開啟webpack配置之旅棒仍。
? 總結(jié)一下悲靴，webpack共分為四個(gè)部分，這個(gè)概念一定要記好莫其，本文就是圍繞這四個(gè)配置進(jìn)行展開的 :
* 入口
* 出口
* 加載器
* 插件
- 模式
基礎(chǔ)配置
- 根據(jù)之前的目錄我們進(jìn)行基本的配置对竣，你可以看到我們配置的語法，非常簡(jiǎn)單榜配，有入口entry和出口output兩個(gè)主要項(xiàng)否纬。
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
此時(shí)我們只需要在項(xiàng)目文件夾命令行中輸入:
webpack
不需要任何額外的內(nèi)容，那么你會(huì)發(fā)現(xiàn)你的webpack編譯成功了蛋褥。同時(shí)編譯時(shí)把代碼壓縮了起來临燃，非常的貼心。但是美中不足的是存在一行警告 WARNING 可惜的是前面沒有FBI..
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
? 這么長(zhǎng)一串警告說了啥那烙心？ 它說你現(xiàn)在有兩種模式膜廊，一種叫做production 還有一種叫development 這兩種一個(gè)都沒有，這就好像是古時(shí)候文人墨客來到了青樓想要吟詩作對(duì)風(fēng)流快活淫茵，媽媽桑也顫抖著臉上的肥肉向你走來爪瓜，問你喜歡哪種姑娘，你卻不理不睬長(zhǎng)驅(qū)直入匙瘪，坐進(jìn)了天字一號(hào)房點(diǎn)了一杯檸檬水铆铆，還是免費(fèi)的那種，這能行么 丹喻？ 人家肯定要給你警告啊薄货，媽媽桑肯定會(huì)給你門口安排兩個(gè)彪形大漢碍论，虎視眈眈的看著你谅猾，碰到這種情況，就算知道不會(huì)挨揍，也一定不會(huì)開心税娜，這就是我們碰到的警告坐搔。
? 我點(diǎn)不就行了么!
? webpack4新增了一個(gè)選項(xiàng)就是mode，必須選擇是在生產(chǎn)環(huán)境和開發(fā)環(huán)境之中選擇一個(gè)敬矩，那么我們?nèi)绾芜x擇哪概行？
webpack --mode development
這樣選擇即可，期中 -- + 參數(shù) 表示你要配置的內(nèi)容是什么谤绳，后面的development 就是你傳入的參數(shù)，表示開發(fā)模式袒哥，開發(fā)模式不會(huì)壓縮你的代碼缩筛，但是 production 模式會(huì)自動(dòng)壓縮你的代碼，好了趕快試一下吧~堡称，見證奇跡的時(shí)刻到了瞎抛。
多入口配置
我們?cè)诤芏鄷r(shí)候需要同時(shí)引入并加載多個(gè)文件怎么辦吶？這個(gè)時(shí)候你只需要在配置里有略微的更新即可却紧。
entry: './src/index.js',
//更新為 如下內(nèi)容
entry: {
index:"./src/index.js",
index1:"./src/index1.js"
}
entry不僅僅可以是一個(gè)string的路徑桐臊，同時(shí)也可以是一個(gè)對(duì)象，這個(gè)對(duì)象里key值作為這個(gè)入口的名稱晓殊，value值作為這個(gè)入口的路徑断凶。
當(dāng)然，我們?nèi)绻苯舆\(yùn)行webpack你會(huì)發(fā)現(xiàn)非常尷尬的問題巫俺，那就是我們的webpack報(bào)錯(cuò)了
這個(gè)報(bào)錯(cuò)表示人家已經(jīng)有了一個(gè)叫做bundle.js的文件了认烁，你咋還能叫budle.js那？對(duì)的可能我們之前寫的代碼你已經(jīng)忘了介汹，在output之中我們給文件命名為bundle.js 但是現(xiàn)在有兩個(gè)却嗡，那也不能都叫bundle.js 吧，這就很尷尬了嘹承，于是更新一下配置:
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
//變更為
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name]-[hash:6].js'
}
這個(gè)[name] 表示以entry 的key值作為編譯后的文件名窗价，emmm，這一波很合理叹卷，也很好理解撼港。
好了，基本配置那就這些東西骤竹，我們接著來往下聊
輔助工具篇
? 我們打包壓縮功能已經(jīng)有了餐胀，但是我們還欠缺一些工具，吟詩作對(duì)么瘤载，美酒佳肴作伴是最好的否灾，所以在這里我們給天字一號(hào)房里增加一些工具。
* devServer
首先安裝一下 :
npm install --save-dev webpack-dev-server
const path = require("path");
devServer:{
contentBase : path.resolve(__dirname,"dev"),
host : "localhost",
// 服務(wù)器壓縮是否開啟
compress : true ,
// 配置服務(wù)器端口號(hào)
port : 8080,
// 不打印異常信息
quite : true,
//開啟模塊熱替換功能
hot : true
}
tip: 這是webpack.config.js 配置文件之中的一部分內(nèi)容鸣奔，這是一部分內(nèi)容墨技，這是一部分內(nèi)容! 要放在module.exports 后面的對(duì)象之中的內(nèi)容惩阶。不是直接用的。
啟動(dòng)之后繼續(xù)來說loader
loader
module : {
rules : [
{
"test" : /\.(css|scss)$/,
"use" : ['style-loader','css-loader','sass-loader']
}
]
}
我們現(xiàn)在有一個(gè)目標(biāo)打包c(diǎn)ss
我們先安裝一個(gè)css-loader插件方便webpack進(jìn)行打包
npm install css-loader -D
npm install style-loader -D
npm install sass-loader -D
npm install node-sass -D
然后我們引入css扣汪，實(shí)現(xiàn)一下
css-loader 會(huì)將css編譯進(jìn)js之中断楷，style-loader會(huì)自動(dòng)將內(nèi)容引入頁面。
接下來我們會(huì)將直接引入頁面中的css變成崭别，獨(dú)立出來一個(gè)css文件
考慮一個(gè)問題冬筒，如何將js放入某個(gè)文件夾之中。
entry: {
"scripts/index":"./src/index.js",
index1:"./src/index1.js"
}
插件 plugin
- 抽離文本插件茅主。
extract-text-webpack-plugin
npm install extract-text-webpack-plugin@next --dev
module : {
rules : [
{
// 加載器加載規(guī)則
"test" : /\.(css|scss)$/,
"use" : ExtractTextPlugin.extract({
//是用哪個(gè)加載器作為返回接口
fallback : "style-loader",
//用哪個(gè)加載器進(jìn)行加載
use : ["css-loader","sass-loader"]
})
}
],
plugins: [
//表示將抽離出來的文件命名為什么,路徑放在哪里
new ExtractTextPlugin("styles/styles.css")
]
}
我們?nèi)绾胃耤ss的文件名那舞痰？
new ExtractTextPlugin({
filename : (getPath)=>{
//建議打印一下 getPath('styles/[name].js') 部分內(nèi)容，再進(jìn)行文件替換诀姚。
return getPath('styles/[name].js').replace("styles/scripts","app")
}
})
你考慮過沒有响牛，這個(gè)插件是否真的適合在開發(fā)環(huán)境之中使用那？其實(shí)并不合適赫段，開發(fā)環(huán)境之中我們配置的傾向應(yīng)該在 如何迅速而敏捷地展示我們代碼的效果呀打，需要搭建服務(wù)器，盡可能減少無用插件性能的消耗糯笙，因?yàn)槲覀儠?huì)頻繁變更代碼贬丛，相信沒有人希望寫個(gè)前端代碼需要配置一個(gè)外星人 ，而生產(chǎn)環(huán)境我們其實(shí)更應(yīng)該傾向于 代碼的壓縮给涕，代碼的簡(jiǎn)化及根據(jù)需求進(jìn)行產(chǎn)出的代碼結(jié)構(gòu)瘫寝，在這個(gè)環(huán)境中我們無需顧及性能，因?yàn)槲覀儾粫?huì)頻繁變更需要打包的代碼 那么到底該如何組織我們的代碼那稠炬？我們選擇進(jìn)行兩套配置文件對(duì)其進(jìn)行配置焕阿。
生產(chǎn)環(huán)境和開發(fā)環(huán)境
- 新建兩個(gè)文件，一個(gè)是webpack.config.dev.js首启，另外一個(gè)是webpack.config.prod.js分別用于生產(chǎn)環(huán)境和開發(fā)環(huán)境暮屡，配置詳情稍后再說。
- 配置我們的package.json毅桃。
"scripts":{
"dev" : "webpack --mode development --config config/webpack.config.dev.js",
"build" : "webpack --mode development --config config/webpack.config.prod.js"
}
我們?nèi)?duì)兩個(gè)配置文件進(jìn)行更新褒纲。
html插件
html-webpack-plugin
const HtmlPlugin = require("html-webpack-plugin");
plugins: [
//表示將抽離出來的文件命名為什么,路徑放在哪里
new ExtractTextPlugin("styles/styles.css"),
// html 打包出現(xiàn)版本號(hào)
new HtmlPlugin({
// 入口html;
template : "./src/index.html",
// 出口html
filename : "./dist/index.html",
//是否壓縮
minify : true
})
]
圖片打包
npm install url-loader file-loader -D
{
test : /\.(png|jpg|git)/,
use : [
{
loader:'file-loader',
options : {
name:"[hash:6].[ext]",
outputPath: 'images/',
publicPath: 'images/',
}
}
]
}
配置babel
安裝編譯工具
npm install --save-dev babel-core@next babel-loader@next babel-preset-env@next babel-preset-react@next
{
test : /\.(jsx|js)$/,
use : {
loader : 'babel-loader',
options : {
presets : [
"env","react"
]
}
},
exclude:/node_modules/
}
第三方包抽離技術(shù)
entry : {
"vendor/react":"react"
}
optimization : {
splitChunks:{
cacheGroups:{
//當(dāng)前路徑名稱
'react' : {
test:/react/,
chunks: 'initial',
name : 'vendor/react',
priority:10
},
'react-dom':{
test:/react-dom/,
chunks:'initial',
name : 'vendor/react',
priority:10
}
}
}
}
