用的webpack4.x 按照官网的前期配置,搭建一个雏形,由于技术栈是react,然后还想ES6等语法,这就不可避免遇到Babel的安装问题,但是Babel官方升级之后的配置会有不兼容问题,先介绍一下Babel:
Babel 是一个 JavaScript 编译器
Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情:
语法转换
通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)
源码转换 (codemods)
更多! (查看这些 视频 获得启发)
以上来自中文官网介绍
为了快速开发,首先记录一下package.json
{
"name": "appfirst",
"version": "1.0.0",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/preset-react": "^7.0.0",
"babel-preset-env": "^7.0.0-beta.3",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^0.28.11",
"eslint": "^6.0.1",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.2",
"eslint-plugin-html": "^6.0.0",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.8.3",
"react": "^16.3.1",
"react-dom": "^16.3.1",
"sass-loader": "^7.0.1",
"semantic-ui-css": "^2.3.1",
"semantic-ui-react": "^0.79.1",
"style-loader": "^0.20.3",
"url-loader": "^1.0.1",
"webpack": "^4.35.0",
"webpack-cli": "^3.3.5",
"webpack-dev-server": "^3.7.2"
},
"dependencies": {
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"babel-loader": "^8.0.0-beta.0",
"babel-preset-latest": "^6.24.1",
"lodash": "^4.17.11",
"bootstrap": "^3.3.7",
"normalize.css": "^8.0.0",
"react-bootstrap": "^0.32.1"
},
"main": ".eslintrc.js",
"description": ""
}
以上包含了Eslint、CSS、File解析器
再记录一下webpack.config.js文件信息
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
// entry: './src/index.js',
entry: {
app: "./src/index.js",
},
output: {
// filename: 'bundle.js',
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist")
},
// 展开编译之后的文件
devtool: "inline-source-map",
// 服务器自己刷新
devServer: {
contentBase: "./dist"
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './public/index.html', //指定模板路径
filename: 'index.html', //指定文件名
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
]
},
{
test: /\.less$/,
use: [
"style-loader",
"less-loader"
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
"file-loader"
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
"file-loader"
]
},
{
test: /\.js$/,
loader: "eslint-loader",
enforce: "pre",
include: [path.resolve(__dirname, "src")], // 指定检查的目录
options: { // 这里的配置项参数将会被传递到 eslint 的 CLIEngine
formatter: require("eslint-friendly-formatter") // 指定错误报告的格式规范
}
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', '@babel/preset-react']
}
}
},
]
}
};