file-loader可以解析項(xiàng)目中的url引入（不僅限于css）使之指向正確的文件
url-loader 會(huì)將小圖片生成base64編碼格式(url-loader封裝了file-loader)
image-webpack-loader 插件可將大的圖片進(jìn)行壓縮從而縮小打包體積
html-loader html 代碼里處理 img 標(biāo)簽的 loader礼烈。
style.css
@import '../assets/font/iconfont.css';
div{ color:red;}
body{ background-image: url('../assets/sun.jpg');}
index.js
import {header} from './header.js'
import './css/style.css'
import './css/style.less'
import pic from './assets/pic1.jpg'
document.body.append(header);
var img = new Image();
img.src=pic;
// img.src=pic;
document.body.append(img);
var box = document.createElement("div");
box.innerHTML='<span class="iconfont icon-shouye1"></span> <span class="iconfont icon-shouye"></span>';
document.body.append(box);
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports={
devServer: {
contentBase: './dist',
},
optimization: {
minimizer: [ new OptimizeCSSAssetsPlugin({})],
},
// mode:'production',
entry:'./src/index.js',
output:{
filename:'main-[hash].js',
path:__dirname+'/dist'
},
module:{
rules:[
{
test: /\.(png|jpg|gif|jpeg|ico)$/,
use:[{loader:'url-loader',options:{limit:50000,name: 'img/[name].[hash:5].[ext]'}},'image-webpack-loader']
},
{
test:/\.css$/,
use:[MiniCssExtractPlugin.loader,/* 'style-loader', */'css-loader']
},
{
test:/\.(eot|woff2|woff|ttf|svg)/,
use:[{loader:'url-loader',options:{limit:10,name: 'font/[name].[hash:5].[ext]'}}],
},
{
test:/\.less$/,
use:[MiniCssExtractPlugin.loader,/* 'style-loader', */'css-loader','less-loader']
}
]
},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template:'./src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'style.css',
}),
]
}
babel 與react
@babel/core-babel核心模塊
@babel/preset-env-編譯ES6等
@babel/preset-react-轉(zhuǎn)換JSX
cnpm i babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/preset-react -D
@babel/plugin-transform-runtime: 避免 polyfill 污染全局變量使套，減小打包體積
@babel/polyfill: ES6 內(nèi)置方法和函數(shù)轉(zhuǎn)化墊片
cnpm i @babel/polyfill @babel/runtime -D
main.js
import ReactDom from 'react-dom'
import React,{Component} from 'react'
class App extends Component{
constructor(props){
super(props);
this.state={num:1}
}
render(){
return (<div>react <button onClick={
()=>{this.setState({num:++this.state.num})}
}>{this.state.num}</button></div>)
}
}
ReactDom.render(<App/>,document.getElementById("root"))
webpack.config.js
{
test: /\.(js|jsx)$/,
use:['babel-loader'],
exclude: /node_modules/
},
.bablerc
{
"presets": ["@babel/preset-env","@babel/preset-react"],
}
壓縮
optimize-css-assets-webpack-plugin css優(yōu)化壓縮
uglifyjs-webpack-plugin js壓縮
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
optimization: {
minimizer: [new UglifyJsPlugin(), new OptimizeCSSAssetsPlugin({}),],
},
代碼分割
optimization: {
splitChunks: {
chunks: "all",
// 所有的 chunks 代碼公共的部分分離出來(lái)成為一個(gè)單獨(dú)的文件},
},
sourceMap
當(dāng)錯(cuò)誤了，能夠知道源代碼在那一行 sourceMap 他是一個(gè)map關(guān)系嚼沿，他知道dist/main刷喜。就是文件96行錯(cuò)誤，對(duì)應(yīng)src目錄下index.js第一行
devtool:'cheap-module-eval-source-map',
建議
// development:'cheap-module-eval-source-map'
// production:'cheap-module-source-map'
按需導(dǎo)入js
等需要的時(shí)候異步加載 js 需要安裝 插件
cnpm install @babel/plugin-syntax-dynamic-import -D
配置 babelrc plugins
{
"presets": ["@babel/preset-env","@babel/preset-react"],
"plugins":["@babel/plugin-syntax-dynamic-import"]
}
在js使用
function getComponent(){
return import(/* webpackChunkName:"jquery" */'jquery').then(({default:$})=>{
return $;
})
}
getComponent().then($=>{
var el = $("<div>你好jquery</div>");
$("body").append(el);
el.click(()=>{
alert("你好");
})
})
也可以這么寫(xiě)
import('jquery')
.then(({default:$})=>{
var el = $("<div>你好jquery</div>");
$("body").append(el);
el.click(()=>{
alert("你好");
})
})
Prefetch
Prefetch是告訴瀏覽器這是一個(gè)在未來(lái)可能使用到的資源。 瀏覽器通常會(huì)在空閑狀態(tài)取得這些資源共虑，在取得資源之后擱在HTTP緩存以便于實(shí)現(xiàn)將來(lái)的請(qǐng)求
import時(shí)增加一條魔法注釋即可：
document.body.onclick=()=>getJq();
function getJq(){
import( /* webpackChunkName:"jquery", webpackPrefetch: true */ 'jquery').then(({default:$})=>{
$("div").click(()=>{
alert("你好");
})
})
}
環(huán)境變量
module.exports = （env）=>{
if(env&&env.production){
return merge(commonConfig,prod)
}else{
return merge(commonConfig,devConfig)
}
}
build:"webpack --env.production --config ./build/webpack.config.comom.js"
Entry 與Output的配置
entry:'./src/index.js'
entry:{
main:'./src/index.js',
sub:'./src/index.js'
},
output:{
publicPath:'http://www.js.com',
// 配置根目錄 默認(rèn)是/ 可以配成相對(duì)目錄./
filename:'[name][hash].[ext ]'
path:path.resolove(__dirname,'dist')
}
tree shaking
按需導(dǎo)入內(nèi)容（搖樹(shù)）
比如模塊里面有個(gè) a,b 兩個(gè)模塊，你只使用一個(gè)a 那么就導(dǎo)入a
webpack.config.js 配置
plugins:[
optimization:{
usedExports:true
}
]
package.json 配置 // 忽略掉css 按需導(dǎo)入呀页。
"name":"lesson"
"sideEffects":["@babel/polly-fill","*.css"],
"sideEffects":false,
