react+webpack+redux+react-router环境搭建

前端之家收集整理的这篇文章主要介绍了react+webpack+redux+react-router环境搭建前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

第一步,新建一个文件夹,然后npm init -yes初始化,会生成一个package.json记录整个项目的依赖包信息

安装webpack cnpm i webpack webpack-dev-server --save-dev

新建以下目录文件

安装reactcnpm i react react-dom redux react-redux redux-thunk react-router --save-dev

index.html文件内容

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <Meta charset="UTF-8">
  5. <title>react-weChat</title>
  6. </head>
  7. <body>
  8. <div id="root"></div>
  9. </body>
  10. </html>

index.jsx文件内容,作为整个项目的主入口

  1. import ReactDOM from 'react-dom';
  2. import React,{Component} from 'react';
  3. class App extends Component {
  4. render() {
  5. return <div>Hello React !!!</div>
  6. }
  7. }
  8.  
  9. ReactDOM.render(
  10. <App/>,document.getElementById("root")
  11. )

接下来开始配置webpack.config.js:
webpack四大组成部分:entry,output,module,plugins

  1. const srcDir = __dirname + "/src";
  2. const distDir = __dirname + "/dist";
  3.  
  4. module.exports = {
  5. entry: [
  6. srcDir + "/index.jsx" //入口
  7. ],output: {
  8. path: distDir,//打包后的文件存放地方,会自动新建
  9. filename: 'index.[hash:7].js'//打包后输出文件名,后面跟7位随机hash值
  10. },devtool: 'source-map',devServer: {
  11. contentBase: './public',//本地服务器所加载的页面的目录
  12. historyApiFallback: true,//不跳转
  13. inline: true,//实时刷新
  14. port: 8090,//端口号
  15. hot: true
  16. },module:{},plugins:[]

再安装解析jsxloader插件去解析jsxes6语法:cnpm i babel-cli babel-loader babel-preset-env babel-preset-react babel-plugin-react-transform react-transform-hmr --save-dev

  1. module: {
  2. rules: [
  3. {
  4. test: /(\.jsx|\.js)$/,use: {
  5. loader: "babel-loader",options: {
  6. presets: [
  7. 'env','react'
  8. ]
  9. }
  10. },exclude: /node_modules/
  11. },//.babelrc
  12. {
  13. "presets": [
  14. "react","env"
  15. ],"env": {
  16. "development": {
  17. "plugins": [
  18. [
  19. "react-transform",{
  20. "transforms": [
  21. {
  22. "transform": "react-transform-hmr","imports": [
  23. "react"
  24. ],"locals": [
  25. "module"
  26. ]
  27. }
  28. ]
  29. }
  30. ]
  31. ]
  32. }
  33. }
  34. }

cnpm i html-webpack-plugin --save-dev

  1. const HtmlWebpackPlugin = require("html-webpack-plugin");//生成新的html文件
  1. plugins: [
  2. new HtmlWebpackPlugin({//根据模板引入css,js最终生成的html文件
  3. filename: 'index.html',//生成文件存放路径
  4. template: './public/index.html',//html模板路径
  5. }),

cnpm i extract-text-webpack-plugin clean-webpack-plugin --save-dev

  1. const ExtractTextPlugin = require('extract-text-webpack-plugin');//分离css和js
  2. const CleanWebpackPlugin = require('clean-webpack-plugin');//清缓存
  3.  
  4.  
  5. new ExtractTextPlugin('style.css'),//独立导出css
  6. new CleanWebpackPlugin('dist/*.*',{
  7. root: __dirname,verbose: true,dry: false
  8. })

cnpm i style-loader css-loader postcss-loader autoprefixer --save-dev

  1. {
  2. test: /\.css$/,use: [
  3. {
  4. loader: "style-loader" //在html中插入<style>标签
  5. },{
  6. loader: "css-loader",//获取引用资源,如@import,url()
  7. options: {
  8. modules: true,//启用css modules
  9. localIdentName: '[name__[local]--[hash:base64:5]]'//指定css的类名格式,避免全局污染
  10. }
  11. },{
  12. loader: "postcss-loader",options: {
  13. plugins:[
  14. require('autoprefixer')({
  15. browsers:['last 5 version']
  16. })
  17. ]
  18. }
  19. }
  20. ]
  21. },

cnpm i less sass less-loader sass-loader stylus-loader node-sass --save-dev

  1. {
  2. test:/\.less$/,use: [
  3. {
  4. loader: "style-loader"
  5. },options: {
  6. importLoaders:2
  7. }
  8. },//自动加前缀
  9. options: {
  10. plugins:[
  11. require('autoprefixer')({
  12. browsers:['last 5 version']
  13. })
  14. ]
  15. }
  16.  
  17. },{
  18. loader: "less-loader"
  19. }
  20. ]
  21. },{
  22. test:/\.scss$/,use:[
  23. {
  24. loader: "style-loader"
  25. },{
  26. loader: "css-loader",options: {
  27. importLoader:1,}
  28. },{
  29. loader: "sass-loader"
  30. },{
  31. loader: "postcss-loader",options: {
  32. plugins:[
  33. require('autoprefixer')({
  34. browsers:['last 5 version']
  35. })
  36. ]
  37. }
  38. }
  39. ]
  40. },

cnpm i file-loader url-loader --save-dev

  1. {
  2. test: /\.(png|jpg|gif|woff|svg|eot|woff2|tff)$/,use: 'url-loader?limit=8129',//注意后面那个limit的参数,当你图片大小小于这个限制的时候,会自动启用base64编码图片
  3. exclude: /node_modules/
  4. }

再加一些webpack插件

  1. const webpack = require("webpack");
  2.  
  3. new webpack.HotModuleReplacementPlugin(),//热加载插件
  4. new webpack.optimize.OccurrenceOrderPlugin(),new webpack.optimize.UglifyJsPlugin(),//压缩
  1. //package.json
  2. "scripts": {
  3. "start": "webpack-dev-server --progress","build": "webpack --config ./webpack.production.config.js --progress && babel dist --out-dir dist"
  4. },

完整版代码请参考:github源代码
代理:

  1. devServer: {
  2. contentBase: './public',//本地服务器所加载的页面的目录
  3. historyApiFallback: true,//不跳转
  4. inline: true,//实时刷新
  5. port: 8090,//端口号
  6. hot: true,proxy:{
  7. '/api1':{
  8. target:'http://10.7.10
  9. 107:8001',changeOrigin:true,pathRewrite:{'^/api':''}
  10. },'/api2':{
  11. target:'http://10.7.10.138:4000',pathRewrite:{'^/api2':''}
  12. }
  13. },

猜你在找的React相关文章