file-loader可以解析项目中的url引入（不仅限于css）使之指向正确的文件
url-loader 会将小图片生成base64编码格式(url-loader封装了file-loader)
image-webpack-loader 插件可将大的图片进行压缩从而缩小打包体积
html-loader html 代码里处理 img 标签的 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-转换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 内置方法和函数转化垫片
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优化压缩
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 代码公共的部分分离出来成为一个单独的文件},
},
sourceMap
当错误了，能够知道源代码在那一行 sourceMap 他是一个map关系，他知道dist/main。就是文件96行错误，对应src目录下index.js第一行
devtool:'cheap-module-eval-source-map',
建议
// development:'cheap-module-eval-source-map'
// production:'cheap-module-source-map'
按需导入js
等需要的时候异步加载 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("你好");
})
})
也可以这么写
import('jquery')
.then(({default:$})=>{
var el = $("<div>你好jquery</div>");
$("body").append(el);
el.click(()=>{
alert("你好");
})
})
Prefetch
Prefetch是告诉浏览器这是一个在未来可能使用到的资源。 浏览器通常会在空闲状态取得这些资源，在取得资源之后搁在HTTP缓存以便于实现将来的请求
import时增加一条魔法注释即可：
document.body.onclick=()=>getJq();
function getJq(){
import( /* webpackChunkName:"jquery", webpackPrefetch: true */ 'jquery').then(({default:$})=>{
$("div").click(()=>{
alert("你好");
})
})
}
环境变量
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',
// 配置根目录 默认是/ 可以配成相对目录./
filename:'[name][hash].[ext ]'
path:path.resolove(__dirname,'dist')
}
tree shaking
按需导入内容（摇树）
比如模块里面有个 a,b 两个模块，你只使用一个a 那么就导入a
webpack.config.js 配置
plugins:[
optimization:{
usedExports:true
}
]
package.json 配置 // 忽略掉css 按需导入。
"name":"lesson"
"sideEffects":["@babel/polly-fill","*.css"],
"sideEffects":false,
