babel Es6转Es5是为了兼容旧的浏览器。
core.js 按需引入是为了减小打包文件体积。
A、初学webpack==>只能将css放在js中和html中,没有进行代码分离,打包环境分离
初始化项目目录
npm init -y
根目录建立webpack.config.js
添加依赖和oader
{
"name": "send",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack serve",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.15.7",
"@babel/core": "^7.15.5",
"@babel/plugin-proposal-class-properties": "^7.14.5",
"@babel/plugin-transform-runtime": "^7.15.0",
"@babel/preset-env": "^7.15.6",
"@babel/preset-react": "^7.14.5",
"@babel/runtime": "^7.15.4",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^6.3.0",
"html-webpack-plugin": "^5.3.2",
"style-loader": "^3.3.0",
"webpack": "^5.53.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.2.1"
},
"dependencies": {
"core-js": "^3.18.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}
配置webpack.config.js打包,热加载
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
function resovleNme(e) {
return `${e.chunk.name}.js`;
}
module.exports = {
entry: {
index: './src/index.js',
},
mode: "development",
output: {
path: path.resolve(__dirname, 'dist'),
filename: (e) => resovleNme(e),
clean: true
},
plugins: [
new HtmlWebpackPlugin({template: './public/index.html'}),
],
module: {
rules: [
{
test: /\.(jsx|js)$/,
exclude: "/node_modules/",
use: {
loader: 'babel-loader',
}
},
{
test: /\.css$/,
use: [
{loader: "style-loader"},
{loader: "css-loader"}
]
}
]
},
devtool: 'inline-source-map',
devServer: {
static: {
directory: path.join(__dirname, 'dist'),
},
compress: true,
port: 9000,
hot: true,
host:"localhost"
}
};
建立babel配置
根目录创建 .babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"]
}
//不知道为啥这样写
之后 npx webpack serve进行启动