首先webpack4建議使用node版本在8.5以上,是由於要兼容新版npm下的npx,cmd中node -v查看node版本。css
WebPack能夠看作是模塊打包機:它作的事情是,分析你的項目結構,找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言(Scss,TypeScript等),並將其打包爲合適的格式以供瀏覽器使用。html
構建就是把源代碼轉換成發佈到線上的可執行 JavaScrip、CSS、HTML 代碼,包括以下內容。前端
構建實際上是工程化、自動化思想在前端開發中的體現,把一系列流程用代碼去實現,讓代碼自動化地執行這一系列複雜的流程。 構建給前端開發注入了更大的活力,解放了咱們的生產力。node
npm init -y
複製代碼
// package.json 文件中
"scripts": {
"build": "webpack --profile --progress --colors --display-error-details",
"dev": "webpack --display-modules --profile --progress --colors --display-error-details"
},
複製代碼
color 輸出結果帶彩色,好比:會用紅色顯示耗時較長的步驟react
profile 輸出性能數據,能夠看到每一步的耗時jquery
progress 輸出當前編譯的進度,以百分比的形式呈現webpack
display-modules 默認狀況下 node_modules 下的模塊會被隱藏,加上這個參數能夠顯示這些被隱藏的模塊git
display-error-details 輸出詳細的錯誤信息github
全局安裝web
npm install webpack -g
複製代碼
npm install webpack webpack-cli -D//-D是指開發環境須要,上線不須要,下同;
複製代碼
通常推薦本地安裝,安裝在本身的項目中,否則版本不一樣會有不兼容。
npm install webpack webpack-cli -D
複製代碼
// 基於node的 遵循commonjs規範的
let path = require('path');//node的模塊
module.exports = {
entry:'./src/index.js', // 入口
output:{
filename:'build.js',
// 這個路徑必須是絕對路徑
path: path.resolve('./dist')
}, // 出口
devServer:{
contentBase:'./dist',
port:8080,
compress:true,// 服務器壓縮
open:true,// 自動打開瀏覽器
// hot:true//熱更新
},// 開發服務器
module:{}, // 模塊配置
plugins:[], // 插件的配置
mode:'development', // 能夠更改模式
resolve:{}, // 配置解析
}
// 在webpack中如何配置開發服務器 webpack-dev-server
複製代碼
npm i webpack-dev-server –D
複製代碼
+ devServer:{
+ contentBase:path.resolve(__dirname,'dist'),
+ host:'localhost',
+ compress:true,
+ port:8080
+ }//開發服務器
複製代碼
+ "scripts": {
+ "build": "webpack --mode development",
+ "dev": "webpack-dev-server --open --mode development "
+ }//開啓本地服務 npm run dev
複製代碼
這種狀況不多,通常就以字符串的形式出現便可,例如:
entry: './src/index.js',
複製代碼
entry:['./src/index.js','./src/a.js']
複製代碼
有時候咱們的頁面能夠不止一個HTML頁面,會有多個頁面,因此就須要多入口
entry: {
index: './src/index.js',
main:'./src/main.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash].js',
publicPath:PUBLIC_PATH
},
new HtmlWebpackPlugin({
minify: {
removeAttributeQuotes:true
},
hash: true,
template: './src/index.html',
chunks:['index'],
filename:'index.html'
}),
new HtmlWebpackPlugin({
minify: {
removeAttributeQuotes:true
},
hash: true,
chunks:['main'],
template: './src/main.html',
filename:'main.html'
})],
複製代碼
經過使用不一樣的Loader,Webpack能夠要把不一樣的文件都轉成JS文件,好比CSS、ES6/七、JSX等
loader三種寫法
npm i style-loader css-loader -D
複製代碼
配置加載器
module: {
+ rules:[
+ {
+ test:/\.css$/,
+ use:['style-loader','css-loader'],//從右往左寫,webpack特性
+ include:path.join(__dirname,'./src'),
+ exclude:/node_modules/
+ }
+ ]
},
複製代碼
npm i file-loader url-loader -D
複製代碼
let logo=require('./images/logo.png');
let img=new Image();
img.src=logo;
document.body.appendChild(img);
複製代碼
{
test:/\.(jpg|png|gif|svg)$/,
use:'url-loader',
include:path.join(__dirname,'./src'),
exclude:/node_modules/
}
複製代碼
還能夠在CSS文件中引入圖片
.img-bg{
background: url(./images/logo.png);
width:173px;
height:66px;
}
複製代碼
插件是 wepback 的支柱功能。webpack 自身也是構建於,你在 webpack 配置中用到的相同的插件系統之上!
npm install 插件名 -D
複製代碼
由於插件都是類,引用方式,在plugins數組中 new 插件名 便可使用。
npm i html-webpack-plugin -D
複製代碼
plugins: [
+ new HtmlWebpackPlugin({
+ minify: {
+ removeAttributeQuotes:true
+ },
+ hash: true,
+ template: './src/index.html',
+ filename:'index.html'
})]
複製代碼
由於CSS的下載和JS能夠並行,當一個HTML文件很大的時候,咱們能夠把CSS單獨提取出來加載,webpack4中mini-css-extract-plugin也能夠實現,可是目前bug比較多,不能分紅多個css。
npm install --save-dev extract-text-webpack-plugin@next
複製代碼
{
test:/\.css$/,
use: ExtractTextWebpackPlugin.extract({
use:'css-loader'
}),
include:path.join(__dirname,'./src'),
exclude:/node_modules/
},
plugins: [
new ExtractTextWebpackPlugin('css/index.css'),
]
複製代碼
處理圖片路徑問題
const PUBLIC_PATH='/';
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath:PUBLIC_PATH
},
複製代碼
指定打包後的圖片位置
use: [
{
loader: 'url-loader',
options: {
limit: 1024,
outputPath:'images/'
}
}
],
複製代碼
在HTML中使用圖片
npm i html-withimg-loader -D
複製代碼
<div class="img-container "><img src="./images/logo.png" alt="logo.png"></div>
複製代碼
{
+ test:/\.(html|html)$/,
+ use:'html-withimg-loader',
+ include:path.join(__dirname,'./src'),
+ exclude:/node_modules/
}
複製代碼
npm i less less-loader -D
npm i node-saas sass-loader -D
複製代碼
@color:orange;
.less-container{
border:1px solid @color;
}
$color:green;
.sass-container{
border:1px solid $color;
}
複製代碼
const cssExtract=new ExtractTextWebpackPlugin('css.css');
const lessExtract=new ExtractTextWebpackPlugin('less.css');
const sassExtract=new ExtractTextWebpackPlugin('sass.css');
{
test:/\.less$/,
use: lessExtract.extract({
use:['css-loader','less-loader']
}),
include:path.join(__dirname,'./src'),
exclude:/node_modules/
},
{
test:/\.scss$/,
use: sassExtract.extract({
use:['css-loader','sass-loader']
}),
include:path.join(__dirname,'./src'),
exclude:/node_modules/
},
複製代碼
爲了瀏覽器的兼容性,有時候咱們必須加入-webkit,-ms,-o,-moz這些前綴
npm i postcss-loader autoprefixer -D
複製代碼
postcss.config.js
module.exports={
plugins:[require('autoprefixer')]
}
複製代碼
.circle {
+ transform: translateX(100px);
複製代碼
{
test:/\.css$/,
use: cssExtract.extract({
+ use:['css-loader','postcss-loader']
}),
include:path.join(__dirname,'./src'),
exclude:/node_modules/
},
複製代碼
Babel實際上是一個編譯JavaScript的平臺,能夠把ES6/ES7,React的JSX轉義爲ES5
npm i babel-core babel-loader babel-preset-env babel-preset-stage-0 babel-preset-react -D
複製代碼
{
test:/\.jsx?$/,
use: {
loader: 'babel-loader',
options: {
presets: ["env","stage-0","react"]
}
},
include:path.join(__dirname,'./src'),
exclude:/node_modules/
},
複製代碼
webapck經過配置能夠自動給咱們source maps
文件,map
文件是一種對應編譯文件和源文件的方法
devtool:'eval-source-map'
複製代碼
有時項目中沒有引用的文件也須要打包到目標目錄
npm i copy-webpack-plugin -D
複製代碼
new CopyWebpackPlugin([{
from: path.join(__dirname,'public'),//靜態資源目錄源地址
to:'./public' //目標地址,相對於output的path目錄
}]),
複製代碼
npm i clean-webpack-plugin -D
複製代碼
new cleanWebpaclPlugin(path.join(__dirname,'dist'))
複製代碼
webpack能夠消除未使用的CSS
npm i -D purifycss-webpack purify-css glob
複製代碼
new PurifyCSSPlugin({//purifycss根據這個路徑配置遍歷你的HTML文件,查找你使用的CSS
paths:require('glob').sync(path.join(__dirname,'src/*.html'))
}),
複製代碼
指定extension以後能夠不用在require或是import的時候加文件擴展名,會依次嘗試添加擴展名進行匹配
resolve: {
//自動補全後綴,注意第一個必須是空字符串,後綴必定以點開頭
extensions: [" ",".js",".css",".json"],
},
複製代碼
配置別名能夠加快webpack查找模塊的速度
const bootstrap=path.join(__dirname,'node_modules/bootstrap/dist/css/bootstrap.css')
resolve: {
+ alias: {
+ 'bootstrap': bootstrap
+ }
},
複製代碼
許多 library 將經過與 process.env.NODE_ENV 環境變量關聯,以決定 library 中應該引用哪些內容。例如,當不處於生產環境中時,某些 library 爲了使調試變得容易,可能會添加額外的日誌記錄(log)和測試(test)。其實,當使用 process.env.NODE_ENV === 'production' 時,一些 library 可能針對具體用戶的環境進行代碼優化,從而刪除或添加一些重要代碼。咱們可使用 webpack 內置的 DefinePlugin 爲全部的依賴定義這個變量:
npm install cross-env -D
複製代碼
"scripts": {
"build": "cross-env NODE_ENV=production webpack --mode development",
"dev": "webpack-dev-server --open --mode development "
},
複製代碼
plugins: [
new webpack.DefinePlugin({
NODE_ENV:JSON.stringify(process.env.NODE_ENV)
}),
複製代碼
if (process.env.NODE_ENV == 'development') {
console.log('這是開發環境');
} else {
console.log('這是生產環境');
}
複製代碼
optimization:{
splitChunks:{
cacheGroups:{
vendor:{//抽離第三插件
test:/node_module/,
chunks:'initial',
name: 'vendor',
priority:10,//優先級
},
commons:{//抽離公共的js
chunks:'initial',
name:'commons',
minSize: 0//只要超出0字節就生成新的公共的包
}
}
}
},
複製代碼