环境：
node: 10.6.0
react： ^16.4.1
webpack: ^4.6.1
安装node
执行npm init，新建一个项目，这里是myBlog
执行npm install webpack webpack-cli webpack-merge --save-dev
如需安装webpack-dev-server, 同时安装webpack-dev-server
这里解释下dependencies和devDependencies的区别， 通过—save安装的包会放在dependencies下面，通过—save-dev安装的包会放在devDependencies下面，两者当你在项目下执行npm install的时候都会安装，区别是在使用npm发布后，其他人使用npm install安装你的包时，只会安装dependencies下的依赖。对于package.json中项的解释，详见npm的文档。
执行npm install react react-dom --save安装react
在项目目录下新建文件夹：config，dist和src（Mac下touch config dist src）
config里面放项目的配置文件，包括我们接下来就要写的webpack的配置文件，此外还可以放数据库的配置文件，端口配置等等
Dist作为webpack的打包出口路径，下面放网页的index.html以及webpack打包出来的文件
src作为webpack的入口路径，下面放webpack入口文件，这里我命名为index.js
在src下面新建index.js， 先在里面放简单的一句话：document.write(“hello world”); 用于测试webpack
下面就是开始写webpack的配置文件，这里我写了三个文件，一个是webpack.base.js作为配置的基本文件，和webpack.config.js作为生产环境的配置，还有webpack.dev.js作为开发环境的配置，配置如下：
webpack.base.js
const path = require("path");
module.exports = {
//入口文件
entry: {
main: './src/index.js'
},
//出口文件
output: {
path: path.resolve(__dirname, '../dist'),
filename: "bundle.js"
},
module: {},
plugins: []
};webpack.config.js
const merge = require('webpack-merge');//webpack配置文件合并
const baseConfig = require("./webpack.base.js");//基础配置
let config = {
mode: 'production'
};
module.exports = merge(baseConfig, config);
webpack.dev.js
const path = require("path");
const merge = require('webpack-merge');//webpack配置文件合并
const baseConfig = require("./webpack.base.js");//基础配置
let config = {
mode: 'development',
devServer: {
contentBase: path.resolve(__dirname, '../dist'),
host: 'localhost',
compress: true,
port: 8888
}
};
module.exports = merge(baseConfig, config);
在dist目录下新建index.html, 内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id=“root"></div>
<script src="./bundle.js"></script>
</body>
</html>
然后在package.json中配置scripts，添加脚本：
"dev": "webpack-dev-server --config=config/webpack.dev.js",
"build": "webpack --config=config/webpack.config.js"
然后执行npm run build， 再在浏览器中打开dist/index.html 或者执行npm run dev, 在浏览器中打开localhost:8888, 出现hello world即代表成功.
接下来就是配置react, 这里我们使用babel进行打包,使我们在写代码的时候可以使用es6的语法. 在终端下运行 npm install babel-cli babel-core babel-loader babel-preset-env babel-preset-react babel-plugin-transform-class-properties --save-dev
修改我们的index.js, 使用react风格, 完整内容如下:
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component{
getText = () => {
return "hello world";
}
render(){
return (
<h1>{this.getText()}</h1>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
此时在跑是会报错的,因为默认是不支持这种语法,需要使用babel进行转换,在webpack.base.js中的module下添加配置数据,如下:
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
presets: [["env"],["react"]],
plugins: [
"transform-class-properties"
]
}
}
]
},注意: 这里的意思是除了node_modules目录下,项目里所有的后缀为.js的文件都使用babel-loader进行转换, 其中test是一个正则表达式,如果你使用了后缀为jsx的格式, 则这里需要修改正则. Options中是babel的配置,也可以在项目根目录下新建.babelrc文件,然后将其放在.babelrc文件中. 具体的配置根据babel的文档和自己的需求进行修改, 这里简单介绍下我使用的配置: env是babel建议用来取代babel-preset-es2016和2015的, 能够支持es6和es5的语法, react能够支持jsx的语法, transform-class-properties是用来支持类中方法使用箭头函数的.
然后再运行npm run build或npm run dev进行打包即可
至此我们便搭建起了一个基本的react+webpack4的项目, 在后续的项目中会陆续增加相应的配置, 以上一个将基本配置完成的项目代码可以在我的github项目: https://github.com/wushuangYK/myBlog.git 中的base分支中找到, 你也可以在其他分支上关注该项目的后续开发进度.
feel free to contact me:2278254874@qq.com.
最后附上参考链接: