webpack一些基本的配置

webpack1.x
----------------------------------
webpack2.x
----------------------------------
webpack3.x
----------------------------------
webpack4.x
---------------------------------

官網: https://webpack.js.org/

---------------------------------
靜態開發(H5+C3) gulp
vue\react -> webpack
DEMO -> webpack 轉
---------------------------------
webpack是什麼?
打包工具(模塊打包器)
前端工程師，必不可少工具
webpack4.x
webpack做用:
1. 打包 (把多個文件打包成一個js文件， 較少服務器壓力、帶寬)
2. 轉化 (好比less、sass、ts) 須要loader
3. 優化 (SPA愈來愈盛行，前端項目複雜度高， webpack能夠對項目進行優化)
---------------------------------
webpack構成:
1. 入口 entry
2. 出口 output
3. loaders 轉化器
4. plugins 插件
5. devServer 開發服務器
6. mode
------------------------------------------------------------------
先必須確保node環境已經安裝
nodejs.org -> download -> 下一步
------------------------------------------------------------------
安裝webpack:
npm install webpack-cli -g

OR

yarn add webpack-cli -g

驗證webpack環境已經ok?
webpack -v
------------------------------------------------------------------
package.json 項目主要依賴配置文件

npm init -y

------------------------------------------------------------------
開發環境: (develepment)
就是你平時編寫代碼的環境

npm i jquery --save-dev
npm i jquery -D
生產環境: (production)
項目開發完畢，部署上線

npm i jquery --save
npm i jquery -S
--------------------------------------------------------------------

npm i jquery
npm un jquery

npm i jquery --save-dev
npm i jquery --save

npm i jquery --save-dev jquery
--------------------------------------------------------------------

npm i jquery loadsh aaa bbb ccc -D

--------------------------------------------------------------------
cnpm如何配置:
npm install -g cnpm --registry=https://registry.npm.taobao.org

--------------------------------------------------------------------
跑一跑webpack:
終端裏運行:
webpack src\index.js --output dist/bundle.js
--------------------------------------------------------------------
webpack.config.js webpack配置文件

預覽:

module.exports={
//入口配置
entry:{},
//出口配置
output:{},
//module.rules
//loaders
module:{},
//插件
plugins:[],
//開發服務器
devServer:{}
};
--------------------------------------------------------------------
module.exports={
//入口配置
entry:{
a:'./src/index.js'
},
//出口配置
output:{
path:__dirname+'/dist', //path必須是絕對路徑
filename:'bundle.js'
}
};
--------------------------------------------------------------------
const path = require('path'); //node系統模塊
module.exports={
//入口配置
entry:{
a:'./src/index.js'
},
//出口配置
output:{
path:path.resolve(__dirname,'dist'), //path必須是絕對路徑
filename:'bundle.js'
}
};
--------------------------------------------------------------------
配置文件名字必定得叫 webpack.config.js 答: 不是

若是更名叫: mmr.config.js

運行時候:

webpack --config mmr.config.js
--------------------------------------------------------------------
npm run dev
npm run build

npm scripts:

package.json:

"scripts": {
"build": "webpack --config mmr.config.js",
"dev":"xxx",
"aaa":"xxx"
}
--------------------------------------------------------------------
parcel 零配置
--------------------------------------------------------------------
webpack4.x 實現所謂的0配置:

--------------------------------------------------------------------
mode:

webpack --mode development

webpack --mode production
明顯文件被壓縮

--------------------------------------------------------------------

多入口(多文件)打包一塊兒:
const path = require('path');
module.exports = {
entry:['./src/index.js','./src/index2.js'], //按照順一塊兒打包 bundle.js
output:{
path:path.resolve(__dirname, 'dist'),
filename:'bundle.js'
}
};
--------------------------------------------------------------------
多入口多出口配置:
const path = require('path');
module.exports = {
entry:{
index:'./src/index.js',
index2:'./src/index2.js'
},
output:{
path:path.resolve(__dirname, 'dist'),
filename:'[name].bundle.js'
}
};
--------------------------------------------------------------------
npm i webpack-cli -g
--------------------------------------------------------------------

html-webpack-plugin:
* 注意: 依賴webpack、webpack-cli
生成頁面

1. 安裝
npm i html-webpack-plugin -D
2. 引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
3. 使用
plugins:[
new HtmlWebpackPlugin()
]
----------------------------------------------------
html-webpack-plugin:
模板:
new HtmlWebpackPlugin({
template:'模板地址'
})
頁面標題:
new HtmlWebpackPlugin({
title:'xxxxx',
template:'模板地址'
})

必定記得在模板中使用:
生成鏈接消除緩存:
new HtmlWebpackPlugin({
hash:true,
title:'xxxxx',
template:'模板地址'
})
壓縮輸出:
new HtmlWebpackPlugin({
minify:{
collapseWhitespace:true, //壓縮空白
removeAttributeQuotes:true //刪除屬性雙引號
},
hash:true,
title:'I Love China',
template:'./src/index.html'
})
生成多個頁面:
filename:'xxx'
多頁面分別引入本身的js:
chunks:['index']

https://www.npmjs.com/package/html-webpack-plugin#
--------------------------------------------------------------------
clean-webpack-plugin: 刪除某些東西(清除)
1. 下載
cnpm i clean-webpack-plugin -D
2. 引入
const CleanWebpackPlugin = require('clean-webpack-plugin');
3. 使用:
new CleanWebpackPlugin(['dist'])
--------------------------------------------------------------------
devServer:
1. 下載
cnpm i webpack-dev-server -D
2. 使用
devServer:{
//設置服務器訪問的基本目錄
contentBase:path.resolve(__dirname, 'dist'),
//服務器ip地址， localhost
host:'localhost',
//設置端口
port:8090
}

此時 pakcage.json:
"scripts": {
"build": "webpack --mode development",
"dev":"webpack-dev-server --mode development"
}

想自動打開瀏覽器:
open:true

熱更新:
hot:true

開啓:
new webpack.HotModuleReplacementPlugin()

https://webpack.js.org/configuration/dev-server/

--------------------------------------------------------------------
loaders: 在webpack裏面是一個很重要功能
加載器、轉化器
好比: less/scss 轉成css
ES7 8
jsx
--------------------------------------------------------------------
處理css文件:
style-loader
css-loader

cnpm i style-loader css-loader -D

配置:
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
}

關於loader寫法:
1. use:['xxx-loader','xxx-loader']
2. loader:['xxx-loader','xxx-loader']
3. use:[
{loader:'style-loader'},
{loader:'css-loader'}
]
--------------------------------------------------------------------
打包完之後確定須要壓縮上線:
如何壓縮:
1. webpack4.x
--mode production
2. 以前版本
uglifyjs-webpack-plugin

a). cnpm i uglifyjs-webpack-plugin -D
b). const uglify = require('xxx);
c). new ugliufy()
--------------------------------------------------------------------
圖片: (png,jpg,gif)
url-loader
file-loader

1. cnpm i file-loader url-loader -D
2. 配置
{
test:/\.(png|jpg|gif)$/,
use:[{
loader:'url-loader',
options:{
limit:50，
outputPath:'images'
}
}]
}
--------------------------------------------------------------------
分離: css
extract-text-webpack-plugin

1. cnpm i extract-text-webpack-plugin -D webpack3.x

cnpm i extract-text-webpack-plugin@next -D webpack4.x
2. 在plugins裏面應用
new ExtractTextPlugin(提取出去的路徑)

use:ExtractTextPlugin.extract({
fallback:'style-loader',
use:'css-loader',
publicPath:'../' //解決css背景圖，路徑問題
})
3. 碰見一些小事
--------------------------------------------------------------------
mini-css-extract-plugin: 截止到目前爲止(2018-3-23)，對背景圖路徑配置
API文檔

new MiniCssExtractPlugin({
filename:'css/index.css'
})
--------------------------------------------------------------------
less:
1. cnpm i less less-loader -D
2. {
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
}

分離less:
{
test:/\.less$/,
//use:['style-loader','css-loader','less-loader']
use:ExtractTextPlugin.extract({
fallback:'style-loader',
use:['css-loader','less-loader']
})
}
--------------------------------------------------------------------
sass:
cnpm i node-sass sass-loader -D

配置:
{
test:/\.(sass|scss)$/,
use:['style-loader','css-loader','sass-loader']
}

提取sass:
{
test:/\.(sass|scss)$/,
use:ExtractTextPlugin.extract({
fallback:'style-loader',
use:['css-loader','sass-loader']
})
}
--------------------------------------------------------------------
transform:

-webkit-transform:

自動處理前綴:

postCss 預處理器

專門處理css平臺

1. cnpm i postcss-loader
autoprefixer -D

2. 準備 postcss.config.js 配置postCss
module.exports ={
plugins:[
require('autoprefixer')
]
};
3. 配置loader
use:[
{loader:'style-loader'},
{loader:'css-loader'},
{loader:'postcss-loader'}
]
4. 提取出來
use:ExtractTextPlugin.extract({
fallback:'style-loader',
use:['css-loader','postcss-loader'],
publicPath:'../' //解決css背景圖，路徑問題
})
--------------------------------------------------------------------
消除冗餘css代碼:
Purifycss

1. 下載

cnpm i purifycss-webpack purify-css -D
2. 引入插件
const PurifyCssWebpack = rewquire('purifycss-webpack');
3. 須要引入一個額外包
glob
cnpm i glob -D
4. 在plugins裏面配置
new PurifyCssWebpack({
paths:glob.sync(path.join(__dirname, 'src/*.html'))
})
---------------------------------------------
調試:
webpack4.x 開啓調試:
--mode development

webpack3.x以前:
sourceMap

devtool:'source-map',

---------------------------------------------
babel:
- babel用來編譯js
- 讓你很輕鬆的使用 ESnext,轉化
- jsx

babel-core bable-loader babel-preset-env

1. 下載
cnpm i babel-loader babel-core babel-preset-env -D
2. 配置
{
test:/\.(js|jsx)$/,
use:['babel-loader'],
exclude:/node_modules/
}

ESnext全部語法
---------------------------------------------
jsx:
cnpm i babel-preset-react -D
cnpm i react react-dom -D
---------------------------------------------
在webpack中用模塊化:
和node如出一轍

導出:
module.exports = xxx
引入:
require('./xxxxx');
---------------------------------------------
在webpack中使用json:
json-loader

到webpack.3x版本以後不用，json能夠默認就識別

const json = require('./xxx.json')
---------------------------------------------
靜態資源輸出:
copy-webpack-plugin

1. 下載
cnpm i copy-webpack-plugin -D
2. 引入
const CopyWebpackPlugin = require('copy-webpack-plugin');
3. 使用
plugins:[
new CopyWebpackPlugin([{
from:path.resolve(__dirname, 'src/assets'),
to:'./public'
}])
]
---------------------------------------------
https://webpack.js.org/plugins/copy-webpack-plugin/

都在npm上:

github issues
---------------------------------------------
使用第三庫:
1. 直接npm下載，而後引入（徹底可使用，可是我我的不是很推薦）
cnpm i jquery -S

import $ from 'jquery'

$(xxxx).on()
$(xxx).css()
2. ProvidePlugin (我的推薦此方式)
const webpack = require('webpack');

在plugins裏面使用:

new webpack.ProvidePlugin({
$:'jquery',
lodash:'lodash'
....
})

經過ProvidePlugin和 import直接引入區別:
1. import $...，引入以後，不管你在代碼中是否使用jquery，打包後，都會打進去，這樣其實產生大量的冗餘js
2. Provideplugin, 只有你在使用到此庫，纔會打包
--------------------------------------------------------
提取第三方(本身感受想提取)js庫:
以前webpack3.x版本以前:

new webpack.optimize.CommonsChunkPlugin({
name:'jquery'
})

到了webpack4.x版本:
optimization.splitChunks

optimization:{
　　splitChunks:{
　　　　cacheGroups:{
　　　　vendor:{
　　　　　　chunks:'initial',
　　　　　　name:'jquery',
　　　　　　enforce:true
　　}
}
}
}
----------------------------------------------
optimization:{
　　splitChunks:{
　　　　cacheGroups:{
　　　　　　aaa:{
　　　　　　　　chunks:'initial',
　　　　　　　　name:'jquery',
　　　　　　　　enforce:true
　　　　},
　　　　  bbb:{
　　　　　　　　chunks:'initial',
　　　　　　　　name:'入口名稱',
　　　　　　　　enforce:true
　　　　　　}
}
}
}
--------------------------------------------------------