1. Basic knowledge
handle css compatibility
1. Install command
npm install --save-dev autoprefixer postcss-loader
2. Configure in webpack.config.js
//处理css兼容性
let postCss=require('autoprefixer')({
"overrideBrowserslist": [
'last 10 Chrome versions',
'last 5 Firefox versions',
'Safari >= 6',
'ie> 8'
]
});
module.exports={
module: {
rules: [
{
test:/\.css$/,
use:[
MiniCssExtractPlugin.loader,//都放到了上面的main.css里面
{
loader:"css-loader"
},
{
//处理css兼容性
loader:'postcss-loader',
options: {
plugins:[
postCss
]
}
}
]
}
]
}
}
css and js compression
css compression
1. Execute command
npm install --save optimize-css-assets-webpack-plugin
2. Configure in webpack.config.js
let OptimizeCss=require('optimize-css-assets-webpack-plugin');
//css压缩
module.exports={
//优化项启动后mode模式代码压缩不再生效,必须配置js压缩插件
optimization:{
minimizer:[
new OptimizeCss()//优化css
]
}
}
js compression
1. Remove
mode:'production'
As this production mode may fail in subsequent multi-page configurations. Therefore, it is best to use js compression when compressing.
2. Execute the command
npm install --save uglifyjs-webpack-plugin
3. Configure in webpack.config.js
let UglifyjsPlugin=require('uglifyjs-webpack-plugin');
module.exports={
optimization:{
minimizer:[
new UglifyjsPlugin({
cache:true,
//是否用缓存
parallel:true,
//是否并发打包
sourceMap:true
//es6映射为es5需要用
})
]
}
}
Image and other resource processing
1. Install command
npm install --save-dev url-loader file-loader
2. Write in webpack.config.js file
module:{
rules:[{
test:/\.(png|jpg|gif|jpeg)$/,
use:{
loader:"url-loader",
//file-loader加载图片,url-loader图片小于多少k用base64显示
options:{
limit:100*1024,
//小于100k用base64
outputPath:'static/images'
//build之后的目录分类
}
}
}]
}
3. Use in index.js
(temporarily use es5 syntax)
url-loader version below 3.0
var image=new Image();
image.src=require('./assets/images/1.jpg');
document.body.appendChild(image);
How to write url-loader version above 3.0
var ima=new Image();
ima.src=require('./assets/images/img1.jpg').default;
document.body.appendChild(ima);
To sum it up: this method can be used regardless of the number of url-loaders
import logo from './assets/images/img1.jpg';
var ima=new Image();
ima.src=logo;
document.body.appendChild(ima);
es6 to es5
1. Install babel-loader
npm install --save babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime @babel/runtime
@babel/core: babel core file
@babel/preset-env: es6 to es5 (low-level)
@babel/plugin-proposal-class-properties: support es6, class Goods class syntax
@babel/runtime: tool function for compiling modules
@ babel/plugin-transfom-runtime: Babel will need some auxiliary functions when converting es6 to es5, such as _extend. When there are many files in this way, the project will be very large. So babel provides transform-runtime to "move" these auxiliary functions into a separate module babel-runtime. Doing so reduces the size of the project file.
2. Configure in webpack.config.js
rules:[{
test:/\.(js|jsx)$/,
//支持require('*.js')或者('*.jsx')文件
use:{
loader:'babel-loader',
options:{
presets:[
'@babel/preset-env'
],
plugins:[
'@babel/plugin-proposal-class-properties',
'@babel/plugin-transform-runtime'
]
}
},
include:path.resolve(__dirname,'src'),
//需要转化的文件夹
exclude:/node_modules/
//排除转换的文件夹
}]
Build a react project with webpack
Method 1: Build a webpack project by yourself
Perform this step after performing the previous steps
1. Install the required modules
Install the react module:
npm i react react-dom --save
install the parsing module of react:npm i babel-preset-react --save-dev
install the required babel:
npm install babel-loader@next @babel/core @babel/preset-react @babel/runtime --save
2. Configure webpack.config.js
{
test:/\.(js|jsx)$/,
use:{
loader:'babel-loader',
options:{
presets:[
'@babel/preset-env','@babel/preset-react'
//增加@babel/preset-react
]
}
}
}
3. Write code in index.js
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component{
render(){
return(
<div>Hello React!</div>
)
}
}
export default App;
ReactDOM.render(<App></App>,dpcument.getElementById("app"));
Method 2: use of react official scaffolding create-react-app
single page configuration
1.
npm install -g create-react-app
2.create-react-app my-app
3.cd my-app
4.npm run eject
5.npm run start
Method 3: Introducing external links
Introduced in the html page
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin>
If you want to convert es6 to es5, you need to add another script tag
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.js"></script>
2. Problems encountered
Error 1:
Reason for error: Resource (asset) and entry point exceed the specified file limit
Solution:
module.exports={
//关闭 webpack 的性能提示
performance: {
hints:false
}
//或者警告 webpack 的性能提示
performance: {
hints:'warning',
//入口起点的最大体积
maxEntrypointSize: 50000000,
//生成文件的最大体积
maxAssetSize: 30000000,
//只给出 js 文件的性能提示
assetFilter: function(assetFilename) {
return assetFilename.endsWith('.js');
}
}
}