使用webpack构建本地服务器:yarn add webpack-dev-server 创建webpack.config.json文件
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, 'dict'), //打包后的出口
publicPath: "/"
},
//新增加部分
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/,
loader: 'url-loader',
},
{
test: /\.scss/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'sass-loader'
}]
},
{
test: /\.css$/, // 正则表达式，表示.css后缀的文件
use: ['style-loader', 'css-loader'] // 针对css文件使用的loader，注意有先后顺序，数组项越靠后越先执行
},
{
test: /\.js$/,
loader: 'babel-loader',
}
]
},
plugins: [
new HtmlWebpackPlugin({
inject: true,
template: path.resolve('public/index.html'),
})
],
devServer: {
static: {
directory: path.join(__dirname, "./public"),
},
},
}
package.json: {
"version": "0.1.0",
"private": true,
"dependencies": {
"@ant-design/icons": "4.6.2",
"@craco/craco": "6.1.2",
"antd": "4.15.5",
"antd-dayjs-webpack-plugin": "^1.0.6",
"axios": "^0.21.1",
"babel-preset-react": "^6.24.1",
"craco": "0.0.3",
"craco-antd": "1.19.0",
"craco-babel-loader": "^0.1.4",
"craco-less": "^1.17.1",
"dayjs": "^1.10.5",
"echarts": "5.1.1",
"html-webpack-plugin": "4.4.1",
"node-sass": "^4.14.1",
"path": "^0.12.7",
"react": "^17.0.2",
"react-dev-utils": "^12.0.0",
"react-dom": "^17.0.2",
"react-router-dom": "5.2.0",
"react-scripts": "^4.0.3",
"sass-loader": "7.0.3",
"universal-cookie": "^4.0.4",
"url-loader": "1.0.1",
"web-vitals": "1.1.2",
"webpack": "4.44.2",
"webpack-dev-server": "^4.7.3"
},
"scripts": {
"start": "webpack-dev-server --mode development",
"build": "webpack",
"test": "craco test"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/core": "^7.7.4",
"@babel/preset-env": "^7.7.4",
"@babel/preset-react": "^7.7.4",
"babel-loader": "^8.0.6",
"eslint-plugin-react": "7.23.2",
"webpack-cli": "^4.9.2"
}
}
.babelrc文件
"presets": [
// "@babel/env", "@babel/react",
"@babel/preset-env",
[
"@babel/preset-react",
{
"runtime": "automatic"
}
]
]
}
