一.基础知识
处理css兼容性
1.安装命令
npm install --save-dev autoprefixer postcss-loader
2.在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和js压缩
css压缩
1.执行命令
npm install --save optimize-css-assets-webpack-plugin
2.在webpack.config.js中配置
let OptimizeCss=require('optimize-css-assets-webpack-plugin');
//css压缩
module.exports={
//优化项启动后mode模式代码压缩不再生效,必须配置js压缩插件
optimization:{
minimizer:[
new OptimizeCss()//优化css
]
}
}
js压缩
1.去掉
mode:'production'
由于这种生产模式在后面的多页面配置中可能会失效。因此压缩时最好使用js压缩。
2.执行命令
npm install --save uglifyjs-webpack-plugin
3.在webpack.config.js中配置
let UglifyjsPlugin=require('uglifyjs-webpack-plugin');
module.exports={
optimization:{
minimizer:[
new UglifyjsPlugin({
cache:true,
//是否用缓存
parallel:true,
//是否并发打包
sourceMap:true
//es6映射为es5需要用
})
]
}
}
图片等资源处理
1.安装命令
npm install --save-dev url-loader file-loader
2.在webpack.config.js文件中编写
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.在index.js里面使用
(暂时用es5的语法)
url-loader版本在3.0以下的写法
var image=new Image();
image.src=require('./assets/images/1.jpg');
document.body.appendChild(image);
url-loader版本在3.0以上的写法
var ima=new Image();
ima.src=require('./assets/images/img1.jpg').default;
document.body.appendChild(ima);
综合一下:无论是url-loader为多少都可以使用这种方式
import logo from './assets/images/img1.jpg';
var ima=new Image();
ima.src=logo;
document.body.appendChild(ima);
es6转es5
1.安装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核心文件
@babel/preset-env:es6转es5(低级)
@babel/plugin-proposal-class-properties:支持es6,class Goods 类语法
@babel/runtime:编译模块的工具函数
@babel/plugin-transfom-runtime:es6转es5时babel会需要一些辅助函数，例如_extend。这样文件多的时候，项目就会很大。所以babel提供了transform-runtime会将这些辅助函数"搬"到一个单独的模块babel-runtime中。这样做能减小项目文件的大小。
2.在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/
//排除转换的文件夹
}]
用webpack搭建react项目
方式一:自己搭建一个webpack项目
执行完前面的步骤后再执行此步骤
1.安装所需模块
安装react模块:
npm i react react-dom --save
安装react的解析模块:npm i babel-preset-react --save-dev
安装所需要的babel:
npm install babel-loader@next @babel/core @babel/preset-react @babel/runtime --save
2.配置webpack.config.js
{
test:/\.(js|jsx)$/,
use:{
loader:'babel-loader',
options:{
presets:[
'@babel/preset-env','@babel/preset-react'
//增加@babel/preset-react
]
}
}
}
3.在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"));
方式二:react官方脚手架create-react-app的使用
单页面配置
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
方式三:以外链接的方式引入
在html页面中引入
<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>
倘若要es6转换es5的话，需要再添加一个script标签
<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>
二.遇到的问题
报错一:
错误原因:资源(asset)和入口起点超过指定文件限制
解决方案:
module.exports={
//关闭 webpack 的性能提示
performance: {
hints:false
}
//或者警告 webpack 的性能提示
performance: {
hints:'warning',
//入口起点的最大体积
maxEntrypointSize: 50000000,
//生成文件的最大体积
maxAssetSize: 30000000,
//只给出 js 文件的性能提示
assetFilter: function(assetFilename) {
return assetFilename.endsWith('.js');
}
}
}