react+webpack4构建项目（1webpack4开发环境
2018-04-08 本文已影响0人
佐伊zero
1、新建目录:
$ mkdir react-demo
2、初始化工程 执行 npm init -y， 生产 package.json 文件
$ cd react-demo
$ npm init -y
3、建立工程目录
--app
--component react组件目录
--index 首页目录
--public 公共目录
--js
--css
--img
--devBuild webpack开发环境下，打包输入目录
--config 打包配置目录
--webpack webpack配置目录
--entryBuild webpack 打包入口文件目录
4.安装react ，react-dom
$ npm i -S react react-dom
# -S 意思是保存 到 package.json dependencies 字段
5.安装webpack,babel依赖
$ npm i -D webpack@4.4.1 webpack-cli@2.0.13 webpack-dev-server@3.1.1 webpack-merge@4.1.2 babel-cli@6.26.0 babel-preset-env@1.6.1 babel-preset-react@6.24.1 babel-preset-react-hmre@1.1.1 babel-loader@7.1.4
# -D 意思是保存 到 package.json devDependencies字段
注意:
复制的时候要是一行的，不能换行！
6.在 app/component/index目录下建立 index.jsx文件，内容
import React from 'react';
class Index extends React.Component {
render() {
return (
<div>
这是首页
</div>
);
}
}
export default Index;
7.在devBuild目录下建立index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="telephone=no" name="format-detection">
<title>react1</title>
</head>
<body>
<div id="app"></div>
<script type=text/javascript src=js/index.js></script>
</body>
</html>
8.在entryBuild目录下建立index.js文件
import React from 'react';
import ReactDOM from 'react-dom';
import Index from '../app/component/index/Index.jsx';
ReactDOM.render(<Index/>,document.getElementById('app'));
9.配置webpack
基础配置 config/webpack/webpack.base.conf.js
let config = {
entry: {
'index':'./entryBuild/index.js'
},
resolve: {
extensions: [".js", ".json", ".jsx", ".css",".pcss"],
}
};
module.exports = config;
文件配置：config/webpack/webpack.file.conf.js
module.exports = {
devDirectory:'devBuild',/*开发目录*/
proDirectory:'dist',/*发布目录*/
resource:'resource',/*静态资源*/
};
开发环境配置：config/webpack/webpack.dev.conf.js
const webpack = require('webpack');//引入webpack
const opn = require('opn');//打开浏览器
const merge = require('webpack-merge');//webpack配置文件合并
const path = require("path");
const baseWebpackConfig = require("./webpack.base.conf");//基础配置
const webpackFile = require("./webpack.file.conf");//一些路径配置
let config = merge(baseWebpackConfig, {
/*设置开发环境*/
mode: 'development',
output: {
path: path.resolve(webpackFile.devDirectory),
filename: 'js/[name].js',
chunkFilename: "js/[name].js",
publicPath: ''
},
plugins: [
/*设置热更新*/
new webpack.HotModuleReplacementPlugin(),
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: [
'babel-loader',
],
include: [
path.resolve(__dirname, "../../app"),
path.resolve(__dirname, "../../entryBuild")
],
exclude: [
path.resolve(__dirname, "../../node_modules")
],
}
]
},
/*设置api转发*/
devServer: {
host: '0.0.0.0',
port: 8080,
hot: true,
inline: true,
contentBase: path.resolve(webpackFile.devDirectory),
historyApiFallback: true,
disableHostCheck: true,
proxy: [
{
context: ['/api/**', '/u/**'],
target: 'http://192.168.12.100:8080/',
secure: false
}
],
/*打开浏览器 并打开本项目网址*/
after() {
opn('http://localhost:' + this.port);
}
}
});
module.exports = config;
10.配置babel
根目录下建立 .babelrc文件
{
"presets":["react","env"],
"env":{
"development": {
"presets":["react-hmre"]
}
}
}
11.配置npm 命令 ，在package.json文件中配置 scripts字段
"dev": "webpack-dev-server --devtool eval --progress --colors --profile --config config/webpack/webpack.dev.conf.js"
12.命令行执行
$ npm run dev
