作者 | 刘婧
编辑 | 刘婧
一、版本号
node v10.8.0webpack v4.29.6二、搭建步骤
1、npm初始化项目
新建项目react-test，并进行初始化$ mkdir react-test$ cd react-test$ npm init2、安装所需要的包
webpack和webpack-dev-server是打包工具和辅助开发的服务器，该服务器能热加载代码，自动刷新页面，代理服务器解决前端开发时跨域问题$ npm install webpack webpack-dev-server这几个是babel编译器的npm包。
$ npm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0下面是部分常用的webpack需要处理样式文件打包的处理器$ npm install css-loader postcss-loader style-loader url-loader sass-loader node-sass安装react的基础包
$ npm install react react-dom其他必要包
$ npm install webpack-cli$ npm install path$ npm install --save @types/webpack3、搭建项目结构
项目结构如下图所示
在react-test目录下创建文件index.html
<html><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>React Testtitle>head><body> <div id="app">div> <script src="./bundle.js">script>body>html>新建文件夹/src，在react-test/src/目录下创建文件main.jsx
import React from 'react';import ReactDOM from 'react-dom';import App from './js/App.jsx';ReactDOM.render( , document.getElementById('app'))在react-test/src/目录下创建文件夹/components，在react/src/components/目录下创建文件App.jsx
import React from 'react';import '../css/App.scss';class App extends React.Component { constructor (...args) { super(...args); } render() { return <div className={styles.fontC}>Hello World !div>; }}export default App;4、配置webpack.config.js文件
在react-test项目目录下新建文件webpack.config.js
const path = require('path');module.exports = { entry: __dirname+'/src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'main.js' }, module: { rules: [ { test: /\.css$/, exclude: [/node_module/], use: [{ loader: 'style-loader' }, { loader: 'css-loader' }], }, { test: /\.scss$/, use: [ { loader: 'style-loader', }, { loader: 'css-loader', options: { modules: true, importLoaders: 1, localIdentName: '[name]_[local]__[hash:base64:5]', }, }, { loader: 'sass-loader', options: { modules: true, importLoaders: 1, localIdentName: '[name]_[local]__[hash:base64:5]', }, }, ], }, { test: /\.(ico|png|jpg|jpeg|mp4|gif|mov)$/, use: [{ loader: 'url-loader', options: { limit: 8192, }, }], }, { test: /\.js|jsx$/, exclude: [/node_module/, /third-party/, /\.json$/], use: [{ loader: 'babel-loader', options: { presets: ['es2015', 'react', 'stage-0'], }, }], }, ] }, resolve: { extensions: ['*', '.js', '.jsx'], }, devServer: { port: 3000, contentBase: path.join(__dirname, 'dist'), historyApiFallback: true, https: false, hot: true, inline: true, compress: false, open: true, },}5、配置package.json文件
修改package.json里的scripts对应的内容
"scripts": { "start": "webpack-dev-server --inline --colors --hot", "build": "webpack --config webpack.config.js"},6、配置html-webpack-plugin插件
安装html-webpack-plugin包
$ npm install html-webpack-plugin在webpack.config.js中添加下面内容
const HtmlWebpackPlugin = require('html-webpack-plugin');plugins: [ new HtmlWebpackPlugin({ favicon: './favicon.ico', filename: './index.html', template: './index.html', inject: true, hash: false, }),],7、运行、编译项目
运行项目
$ npm run start编译项目
$ npm run build输入命令后，可生成一文件夹/dist，文件夹下的内容即编译结果。
三、重要配置文件
下附两个配置文件的全部内容
1、webpack.config.js
const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: __dirname+'/src/main.jsx', output: { path: path.resolve(__dirname, 'dist'), filename: 'main.js' }, module: { rules: [ { test: /\.css$/, exclude: [/node_module/], use: [{ loader: 'style-loader' }, { loader: 'css-loader' }], }, { test: /\.scss$/, use: [ { loader: 'style-loader', }, { loader: 'css-loader', options: { modules: true, importLoaders: 1, localIdentName: '[name]_[local]__[hash:base64:5]', }, }, { loader: 'sass-loader', options: { modules: true, importLoaders: 1, localIdentName: '[name]_[local]__[hash:base64:5]', }, }, ], }, { test: /\.(ico|png|jpg|jpeg|mp4|gif|mov)$/, use: [{ loader: 'url-loader', options: { limit: 8192, }, }], }, { test: /\.js|jsx$/, exclude: [/node_module/, /third-party/, /\.json$/], use: [{ loader: 'babel-loader', options: { presets: ['es2015', 'react', 'stage-0'], }, }], }, ] }, resolve: { extensions: ['*', '.js', '.jsx'], }, devServer: { port: 3000, contentBase: path.join(__dirname, 'dist'), historyApiFallback: true, https: false, hot: true, inline: true, compress: false, open: true, }, plugins: [ new HtmlWebpackPlugin({ favicon: './favicon.ico', filename: './index.html', template: './index.html', inject: true, hash: false, }), ],}2、package.json
注：各依赖包的版本不要轻易调整，因为可能因为彼此不支持而导致项目无法正常运行。
{ "name": "react-test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack-dev-server --inline --colors --hot", "build": "webpack --config webpack.config.js" }, "author": "", "license": "ISC", "dependencies": { "@types/webpack": "^4.4.27", "babel-core": "^6.26.3", "babel-loader": "^7.1.4", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "css-loader": "^2.1.1", "html-webpack-plugin": "^3.2.0", "node-sass": "^4.12.0", "path": "^0.12.7", "postcss-loader": "^3.0.0", "react": "^16.8.6", "react-dom": "^16.8.6", "sass-loader": "^7.1.0", "style-loader": "^0.23.1", "url-loader": "^1.1.2", "webpack": "^4.29.6", "webpack-cli": "^3.3.0", "webpack-dev-server": "^3.3.0" }}往期精彩回顾
1. 敏捷电子协作工具的六项要求 | ACT
2. 未来银行的发展之想 ——从银行的跨界、泛在和共享谈起
3. 抖音BoostMultiDex优化实践：Android低版本上APP首次启动时间减少80%(一)
4. 抖音BoostMultiDex优化实践：Android低版本上APP首次启动时间减少80%(二)
5. 分布式敏捷组织管理实践初探
6. 分布式事务
7. 话说新金融、第二曲线与“三大战略”
8. Consul集群搭建
关注我们
让我知道你在看
914
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
