版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_38023551/article/details/82805288
接着上文，对webpack 的配置的优化和对css，图片的编译。以及引入antd
项目代码地址react-project
优化webpack
生成的文件名添加Hash值
output: {
filename: "js/[name].[chunkhash].js",
},
生产过程中，清理dist文件夹。安装插件 clean-webpack-plugin
npm install --save-dev clean-webpack-plugin
- 修改 webpack.prod.conf.js
const CleanWebpackPlugin = require('clean-webpack-plugin');
...
module.exports = merge(baseWebpackConfig, {
plugins: [
new CleanWebpackPlugin(['../dist'], { allowExternal: true })
]
})
添加热加载模块
yarn add --save-dev webpack-dev-server
在build中添加webpack.dev.conf.js文件
const path = require('path');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = merge(baseWebpackConfig, {
mode: 'development',
output: {
filename: "js/[name].[hash:16].js",
},
// 源错误检查
devtool: 'inline-source-map',
plugins: [
// 处理html
new HtmlWebpackPlugin({
template: 'public/index.html',
inject: 'body',
minify: {
html5: true
},
hash: false
}),
// 热更新
new webpack.HotModuleReplacementPlugin(),
],
// 热更新
devServer: {
port: '3000',
contentBase: path.join(__dirname, '../public'),
compress: true,
historyApiFallback: true,
hot: true, //开启
https: false,
noInfo: true,
open: true,
proxy: {}
}
});
在package.json scripts属性添加内容
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"build": "webpack --config build/webpack.prod.conf.js",
},
npm run dev
自动打开浏览器打开入口页面实时更新
对 css less sass 文件进行处理
- 安装依赖
npm install extract-text-webpack-plugin
npm install style-loader css-loader postcss-loader autoprefixer --save-dev
npm install less sass less-loader sass-loader stylus-loader node-sass --save-dev
- webpack.base.conf.js 文件修改
// webpack.base.conf.js
{
test: /\.css$/,
use: ['style-loader', 'css-loader',],
},
{
test:/\.less$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{
loader: "postcss-loader",//自动加前缀
options: {
plugins:[
require('autoprefixer')({
browsers:['last 5 version']
})
]
}
},
{ loader: "less-loader" }
]
},
{
test: /\.scss$/,
use: [
{ loader: "style-loader" },
{
loader: "css-loader",
},
{ loader: "sass-loader" },
{
loader: "postcss-loader",
options: {
plugins: [
require('autoprefixer')({
browsers: ['last 5 version']
})
]
}
}
]
},
对图片和字体进行编译
- 安装依赖
npm i file-loader url-loader --save-dev
webpack.base.conf.js 文件修改
{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: {
// outputPath:'../',//输出**文件夹
publicPath: '/',
name: "images/[name].[ext]",
limit: 1000 //是把小于1000B的文件打成Base64的格式，写入JS
}
}]
},
{
test: /\.(woff|svg|eot|woff2|tff)$/,
use: 'url-loader',
exclude: /node_modules/
// exclude忽略/node_modules/的文件夹
}
然后可以在index.js引入一个图片还有css文件进行编译试试看。
对生成的代码进行分析
引入依赖
yarn add webpack-bundle-analyzer -D
在/ webpack.prod.conf.js 文件
// webpack.prod.conf.js 文件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
...
plugins: [
// 分析哪些文件体积过大
new BundleAnalyzerPlugin(),
],
引入antd
这里开始出现天坑了，巨坑了
mdzz的。
antd的文档地址Ant Design
安装antd
现在从 yarn 或 npm 安装并引入 antd。
yarn add antd
修改index.js，引入 antd 的按钮组件。
import React from "react";
import ReactDom from "react-dom";
import { Button, Switch } from 'antd';
import styles from './index.less'
import Pic from './g.jpg'
const Div = document.createElement("div");
Div.setAttribute("id", "root")
document.body.appendChild(Div)
ReactDom.render(
<div>
<h1 className={styles.green}>hello, world!333</h1>
<img src={Pic}></img>
<Button type="primary">Primary</Button>
<Switch defaultChecked />
</div>,
document.getElementById("root")
);
这时候100%的没有效果。
官方文档在引入antd的css时候，给了两种方案。文档链接。
- 一种是在index.css,在文件顶部引入 antd/dist/antd.css
- 另一种是按需加载组件代码和样式。
这里使用了一个新的插件babel-plugin-import
yarn add babel-plugin-import
官方文档指出 babel-plugin-import
修改.babelrc文件
{
"presets": [
"react",
"env"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "lib",
"style": true
}
]
]
}
babel-plugin-import的使用方法babel-plugin-import。
这时候，文档已经解释完毕。
结果发现完全按照文档写的结果还是不行！！！
谷歌半天的坑才知道还需要的webpack配置的js里面进行配置一下。
我这里是将antd的样式改写为less，引入的。所以如果需要覆盖样式的话。一定要将后缀改为.less。
直接上配置
less配置了两遍，一遍还不行，别问我为什么。我也不知道。
{
test: /\.css$/,
use: ['style-loader', 'css-loader',],
},
{
test: /\.less$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{
loader: "postcss-loader",
options: {
plugins: [
require('autoprefixer')({
browsers: ['last 5 version']
})
]
}
},
// javascriptEnabled: true ------ 在less里面可以使用JavaScript表达式
{ loader: 'less-loader', options: { javascriptEnabled: true } },
],
// 切记这个地方一定要引入antd，文档上没有写入但是一定要因引进去，切记切记
include: [/antd/],
},
{
test: /\.less$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
sourceMap: true,
localIdentName: '[name]__[local]--[hash:base64:5]',
},
},
{
loader: "postcss-loader",
options: {
plugins: [
require('autoprefixer')({
browsers: ['last 5 version']
})
]
}
},
{ loader: 'less-loader', options: { javascriptEnabled: true } },
],
exclude: [/antd/],
},
至此大工告成。