demo地址: https://github.com/Lkkkkkkg/webpack-demo
目前配置了 HtmlWebpackPlugin , CleanWebpackPlugin 插件, 使用了 source map 功能 , 和 webpack-dev-serve 服务器, 配置详情浏览 webpack 配置系列: https://blog.csdn.net/qq593249106/article/details/84892069
在前面的配置后, 更改了目录结构, 新建一个 App.js 为了分离 React 入口文件和主文件, 还新建了一个 index.html 作为模板文件, 是为了 HtmlWebpackPlugin 插件生成的页面有 < div id = 'root '></ div> 这个根 div 让 react 完成渲染
目录结构:
|- /node_modules
|- /src //用于放源文件的文件夹
|- /components
|- /index //模板文件
|- index.html //模板文件
|- index.js //入口文件
|- App.js //react主文件
|- package.json
|- webpack.config.js //webpack配置文件
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React</title>
</head>
<body>
<div id="root">
</div>
</body>
</html>
index.js
import React from 'react'
import { render } from 'react-dom'
import App from './App'
render(<App />, document.getElementById("root"))
App.js
import React from 'react'
const App = () => (
<h1>
Hello, React!<br />
</h1>
)
export default App
别忘了修改一下入口文件配置, 加上一个 mode: development 属性, 代表是开发模式
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/components/index/index.js', //入口文件
devtool: 'inline-source-map', // 不同选项适用于不同环境
devServer: {
contentBase: './dist', //将dist目录下的文件(index.html)作为可访问文件, 如果不写这个参数则默认与webpack.cofig.js的同级目录
port: 8080 //端口号设为8080, 默认也是8080
},
plugins: [ //webpack 通过 plugins 实现各种功能, 比如 html-webpack-plugin 使用模版生成 html 文件
new CleanWebpackPlugin(['dist']), //设置清除的目录
new HtmlWebpackPlugin({
filename: 'index.html', //设置生成的HTML文件的名称, 支持指定子目录,如:assets/admin.html
template: "./src/components/index/index.html" //指定模板文件的位置
})
],
output: {
filename: 'bundle.js', //根据入口文件输出不同出口文件
path: path.resolve(__dirname, 'dist')
}
};
package.json
{
"name": "demo01",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
"dependencies": {
"lodash": "^4.17.11"
}
}
安装
安装 react, 终端输入:
npm install react react-dom --save-dev
React 组件由 JSX 组成, 浏览器无法识别 JSX , 需要 babel 进行转换
- babel-croe (为babel核心文件)
- babel-preset-env (将ES6转义成ES5)
- babel-preset-react (将JSX转义成js)
- babel-loader (webpack的babe转换)
npm install babel-core babel-preset-env babel-preset-react babel-loader --save-dev
安装完后, 在根目录下新建一个 .babelrc 文件, 它是bable的核心配置文件, 内容如下:
.babelrc
{
"presets": ["env", "react"]
}
配置 webpack.config.js
然后在 webpack 配置转 jsx 和 es6 的 rule:
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/components/index/index.js', //入口文件
devtool: 'inline-source-map', // 不同选项适用于不同环境
devServer: {
contentBase: './dist', //将dist目录下的文件(index.html)作为可访问文件, 如果不写这个参数则默认与webpack.cofig.js的同级目录
port: 8080 //端口号设为8080, 默认也是8080
},
module: {
rules: [ //配置加载器, 用来处理源文件, 可以把es6, jsx等转换成js, sass, less等转换成css
{
exclude: /node_modules|packages/, //路径
test: /\.js$/, //配置要处理的文件格式,一般使用正则表达式匹配
use: 'babel-loader', //使用的加载器名称
},
]
},
plugins: [ //webpack 通过 plugins 实现各种功能, 比如 html-webpack-plugin 使用模版生成 html 文件
new CleanWebpackPlugin(['dist']), //设置清除的目录
new HtmlWebpackPlugin({
filename: 'index.html', //设置生成的HTML文件的名称, 支持指定子目录,如:assets/admin.html
template: "./src/components/index/index.html" //指定模板文件的位置
})
],
output: {
filename: 'bundle.js', //根据入口文件输出不同出口文件
path: path.resolve(__dirname, 'dist')
}
};
运行服务器
终端输入 npm run dev
npm run dev
发现报错 Error: Cannot find module ‘@babel/core’
babel-loader@8 requires Babel 7.x (the package ‘@babel/core’). If you’d like to use Babel 6.x (‘babel-core’), you should install ‘babel-loader@7’.
通过看 package.json 文件发现我的 bable-loader 是8版本, 尝试卸载, 然后重新安装 bable-loader7 版本:
npm uninstall babel-loader
npm install babel-loader@7.1.5 --save-dev
重新运行服务器:
npm run dev
弹出网页, 配置成功