什么是webpack
webpack是一個模塊打包器（bundler）壮韭。
在webpack看來惯殊，前端的所有資源文件（js/json/css/img/less/...）都會作為模塊處理梨熙，他將根據(jù)模塊的依賴關(guān)系進行靜態(tài)分析夯接，生成對應(yīng)的靜態(tài)資源蚀腿。
理解loader
webpack本身只能加載js/json模塊，如果要加載其他類型的文件（模塊）璧诵，就需要對應(yīng)的loader進行轉(zhuǎn)換加載；它本身也是一個函數(shù)段只，接受源文件作為參數(shù)腮猖，返回轉(zhuǎn)換的結(jié)果，loader一般以xxx-loader的方式命名赞枕，xxx代表了loader要做的的轉(zhuǎn)換功能澈缺，比如：json-loader
配置文件（默認）
webpack.config.js:是一個node模塊，返回一個json格式的配置信息對象
插件
插件可以完成一些loader不能完成的功能
插件的使用一般是在webpack的配置信息plugins選項中指定
CleanWebpackPlugin：自動清除指定文件夾資源
HtmlWebpackPlugin：自動生成HTML文件
UglifyJSPlugin:壓縮js文件
webpack可以進行0配置
文件夾中只有一個index.js文件炕婶。在項目根文件目錄下運行webpack姐赡，會自動生成相關(guān)依賴，并自動生成dist文件夾以及它下面的main.js,這都是依賴中默認的輸出的柠掂∠罨可以直接鼠標右鍵跑main.js的代碼在控制臺也是可以輸出的（node環(huán)境）。
webpack打包支持js模塊化涯贞，通過建立一個a.js文件,并在index文件中導(dǎo)入枪狂，看打包輸出
手動配置webpack=>webpack.config.js 在終端運行webpack，直接生成build文件夾宋渔，需要在index.html中引入
自定義配置文件州疾，我們可以自定義一個webpack.config.my.js文件
直接在終端輸入指令：webpack --config webpack.config.my.js，但是每次打包都要把配置路徑帶上皇拣，如果直接輸入指令webpack严蓖，就是默認的webpack.config.js配置打包。這樣一來比較麻煩氧急，所以我們會在配置文件中配置寫腳本去執(zhí)行颗胡。直接在package.json中配置scripts如下：
build是指指令key可以寫成b或者其他名字。直接在終端輸入npm run buid吩坝。也可以把webpack后面的字符串省略寫成毒姨，npm run build -- --config webpack.config.my.js
{
"name": "webpack4",
"version": "1.0.0",
"scripts": {
"build": "webpack --config webpack.config.my.js"
}
}
webpack配置服務(wù)
首先確保安裝了下面的環(huán)境
1、初始化生成package.json文件
npm init -y
2钉寝、安裝webpack到該目錄：
npm install --save-dev webpack
npm install --save-dev webpack-cli
通過運行指令webpack-dev-server手素，只能以目錄的形式展現(xiàn)
我們要以端口服務(wù)的形式展現(xiàn)就要配置相應(yīng)的服務(wù)器，在webpack.config.js中配置devServer瘩蚪，在build中加個index.html文件泉懦，輸入npm run dev
module.exports = {
devServer: {
port: 9000,
progress: true,//進度條
//告訴本地服務(wù)從哪里提供內(nèi)容且只有在您想要提供靜態(tài)文件時才需要這樣做 其實就是index.html所在的目錄
contentBase: './build',
compress: true
},
mode: 'development',//模式 默認兩種模式 production development
// production 生產(chǎn)環(huán)境 代碼會壓縮 體積小
entry: './src/index.js',//入口
output: {
filename: 'bundle.js',//打包后的文件名
path: path.resolve(__dirname, 'build')
//路徑必須是一個絕對路徑 需要node的核心模塊path
// resolve方法能將相對路徑解析成絕對路徑
//__dirname意思是以當(dāng)前目錄下生成一個build目錄，不加也可以
}
}
配置html組件疹瘦，自動綁定index.html文件
npm add html-webpack-plugin -D安裝插件崩哩，在配置文件中引入
配置css，在module中配置相關(guān)的模塊
plugins: [//數(shù)組放著所有的webpack插件
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
minify: {
removeAttributeQuotes: true
},
hash: true
})
],
module: {
rules: [//規(guī)則 css-loader 接續(xù)@import這種語法的
// style-loader他是把css插入到head的標簽中
// loader的特點 希望單一
// loader的用法 字符串只用一個loader
// 多個loader需要[]
// loader的順序 默認是從從右向左執(zhí)行
// loader還可以寫成對象方式
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
'css-loader'
]
}
]
輸入指令npm add css-loader style-loader -D
然后npm run dev配置文件中有生成相應(yīng)的版本配置信息
{
"name": "webpack4",
"version": "1.0.0",
"scripts": {
"build": "webpack --config webpack.config.my.js",
"dev": "webpack-dev-server"
},
"devDependencies": {
"css-loader": "^3.2.0",
"html-webpack-plugin": "^3.2.0",
"less-loader": "^5.0.0",
"style-loader": "^1.0.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.9"
},
"dependencies": {
"webpack-dev-server": "^3.8.2"
}
}
配置less
建立一個index.less文件，寫入樣式
然后在index.js中導(dǎo)入require('./index.less')
輸入指令npm add less less-loader -D下載相關(guān)模塊
在配置中配置相關(guān)模塊
{
// 可以處理less文件 sass文件 stylus文件 node-sass sass-loader
test: /\.less$/,
use: [
{
loader: 'style-loader',
options: {
// 將樣式插入head上面邓嘹，不然在head中寫樣式會被覆蓋酣栈，默認插入就是head里
insert: 'top'
}
},
'css-loader',//@important 解析路徑
'less-loader',//將less---css
]
}
然后npm run dev配置文件中有生成相應(yīng)的版本配置信息
