webpack构建react项目----实战篇

可以用脚手架搭建react环境，比较快一点；但实际开发，公司常需要不使用现有的方法来搭建，这时候就需要自己去使用webpack自动化构建工具来搭建react项目的环境了。以下是简单的搭建步骤：

1.创建目录，项目名为wpro

2.项目初始化 npm init
3.安装webpack依赖 npm i webpack webpack-cli webpack-dev-server -D
4.创建项目目录 components,css,img,icon index.html main.js webpack.config.js
5.写文件 index.html写主容器
main.js整合组件渲染因为需要reactDOM，所以安装依赖 ，npm i react@15 react-dom@15 -D
components里面建一个组件app.js components/app.js
webpack.config.js 官方文档http://www.css88.com/doc/webpack2/guides/development/
6.打包命令： webpack 运行命令： webpack-dev-server
注：可以在pack.json里面配置一下scripts如下：
"build": "webpack",
"dev": "webpack-dev-server"
就可以用npm run build/dev来执行了

注：进入官方文档，复制webpack的最简单的配置，
之后，模块整合 babel 加载器安装。配置babel-loader加载器，注意要加入react，即 query: {presets: ['es2015'，'react']},然后还要安装依赖npm install babel-loader@7 babel-core babel-preset-es2015 babel-preset-react webpack --save-dev
配置热更新，找到devserver的配置之后，加入inline:true这行，保证更改dom就可以更新页面
样式加载器css-loader或者style-loader，配置，安装依赖npm install style-loader css-loader --save-dev
图片加载器url-loader，配置，安装依赖npm install --save-dev url-loader
icon图标加载器也是url-loader,注意icon文件夹里面的svg是图片格式，所以需要手动加入到img的正则配置里面
其他文件还可以配置一下file-loader

//webpack.config.js
var path = require('path');

module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  },
  module: {
	  rules: [
	    {
	      test: /\.js$/,
	      exclude: /(node_modules|bower_components)/,
	      loader: 'babel-loader',
	      query: {
	        presets: ['es2015',"react"]
	      }
	    },
	    {
		    test: /\.css$/,
		    use: [
		    	{
		        loader: 'style-loader'
		      },
		      {
		        loader: 'css-loader'
		      }
		    ]
			},
			{
        test: /\.(png|jpg|gif|svg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000
            }
          }
        ]
      }
	  ]
	},
	devServer: {
	  contentBase: path.join(__dirname, "dist"),
	  compress: true,
	  port: 9000,
	  inline:true
	}
};

//main.js
//整合组件  渲染
var React = require("react")
var ReactDOM = require("react-dom")
var Demo = require("./components/App")

ReactDOM.render(<Demo />,document.getElementById("out"))

//index.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>webpack搭建react项目</title>
	</head>
	<body>
		<!--主容器-->
		<div id="out"></div>
	</body>
</html>

components/App.js
var React = require("react")			
var Demo = React.createClass({
	render(){
		return(
			<div>
				<h1>hello</h1>
			</div>
		)
	}
})	
module.exports = Demo

打包之后会生成dist文件夹，里面会将上面主要文件打包成为foo.bundle.js，因为监听的是dist下的index.html文件，所以将根目录下的index.html复制一份到dist文件夹下面，引入一下js文件就可以在浏览器下面直接打开了

dist/index.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>webpack搭建react项目</title>
	</head>
	<body>
		<!--主容器-->
		<div id="out"></div>
	</body>
	<script src="foo.bundle.js" type="text/javascript" charset="utf-8"></script>
</html>

项目中少不了引入一些css样式，icon图标，图片之类的文件，之前建目录的时候也建立过img、icon、css目录，也在webpack.config.js里面做过配置，安装过依赖。引用的话，代码----

//main.js
var React = require("react")
var ReactDOM = require("react-dom")
var Demo = require("./components/App")

import "./css/style.css"
import "./icon/iconfont.css"

ReactDOM.render(<Demo />,document.getElementById("out"))

//component/app.js
var React = require("react");
var Demo = React.createClass({
	render(){
		return(
			<div>
				<h1>hello</h1>
				<i className="iconfont icon-home"></i>
			</div>
		)
	}
})	
module.exports = Demo

加载图片的话，一定要有file-loader，否则终端会一直报错，所以先安装依赖,npm i file-loader -D，再去引文件

//componnets/app.js
var React = require("react");
import imgs from "../img/a.jpg" 

var Demo = React.createClass({
	render(){
		return(
			<div>
				<h1>hello</h1>
				<i className="iconfont icon-home"></i>
				<img src={imgs}/>
			</div>
		)
	}
})	
module.exports = Demo

npm run dev监听localhost:9000，浏览器下监听。npm run build 打包一下就可以了。

下面是pack.json文件也奉上

{
  "name": "wpro",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^1.0.0",
    "file-loader": "^2.0.0",
    "react": "^15.6.2",
    "react-dom": "^15.6.2",
    "style-loader": "^0.23.0",
    "url-loader": "^1.1.1",
    "webpack": "^4.17.2",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.7"
  }
}

webpack构建react项目----实战篇

猜你喜欢