如何利用vue的webpack配置出react

一直在用vue开发程序，现在企业需要用React开发那么就需要选择一个好的构建工具去配置开发，我这里选择的是webpack，因为vue就是用的webpack，我对这个比较熟悉，但是配置react还是边摸索边配置，在网上找了一些配置教程感觉不管是性能还是使用上配置的都是不是很好，于是就行到了把vue配置的webpack移植到react上那么就完美了，那么怎么移植呢？看看下面的教程吧！


1、 创建package.json

window：npm init –yes
mac：sudo npm init --yes

2、 安装react、react-dom、babelify、babel-preset-react

windows: npm install --save-dev react react-dom babelify babel-preset-react
mac：sudo npm install --save-dev react react-dom babelify babel-preset-react

3、 安装babel-preset-es2015

window：npm install babel-preset-es2015 --save-dev
mac：sudo npm install babel-preset-es2015 --save-dev

3、局部安装webpack:

window：npm install webpack --save-dev
mac：sudo npm install webpack --save-dev

4、 局部安装webpack-dev-server

window：npm install webpack-dev-server —-save-dev
mac：sudo npm install webpack-dev-server —-save-dev

5、 修改package.json

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "node build/build.js",
"watch": "webpack --watch --config webpack.dev.js",
"dev": "webpack-dev-server --inline --config build/webpack.dev.conf"
}

"engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

"devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-react-html-attrs": "^2.1.0",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.9.1",
    "babel-preset-env": "^1.3.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.5.0",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "clean-webpack-plugin": "^0.1.17",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.7",
    "csv-loader": "^2.1.1",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.5",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "inline-source-map": "^0.6.2",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.0.0",
    "ora": "^1.3.0",
    "postcss-import": "^10.0.0",
    "postcss-loader": "^2.0.6",
    "precss": "^2.0.0",
    "react-native": "^0.55.4",
    "react-native-drawer-layout": "^2.0.0",
    "react-style-loader": "^1.0.1",
    "react-transform-hmr": "^1.0.4",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "style-loader": "^0.19.0",
    "ts-loader": "^2.3.7",
    "uglifyjs-webpack-plugin": "^0.4.6",
    "url-loader": "^0.6.2",
    "webpack": "^3.6.0",
    "webpack-dev-middleware": "^1.12.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0",
    "webpack-post-compile-plugin": "^0.1.2",
    "xml-loader": "^1.2.1"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "es6-promise": "^4.2.4",
    "eslint-plugin-react-native": "^3.2.1",
    "history": "^4.7.2",
    "lodash": "^4.17.4",
    "moment": "^2.21.0",
    "rc-form": "^2.2.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-lazyload": "^2.3.0",
    "react-mixin": "^4.0.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",
    "whatwg-fetch": "2.0.3"
  }

6、 执行：

windows：npm install
mac：sudo npm install

7、 将vue中的build文件夹、config文件夹、.babelrc文件复制到项目根目录下面。

8、 打开.babelrc文件，修改为：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"]
}

9、 打开build/utils.js

修改1：
const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap,
      modules: true,//开启css模块化
      localIdentName: '[local]--[hash:base64:6]', //开启模块化后生成的class 名字
    }
  }
  修改2：
if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: '../../',//解决 build css bg img 加载路径不对问题
        fallback: 'react-style-loader'// 修改vue-style-loader
      })
    } else {
      return ['react-style-loader'].concat(loaders)// 修改vue-style-loader
    }
  }

10、 打开build/webpack.base.conf.js

修改1：
entry: {
    "babel-polyfill": 'babel-polyfill',
    app: './src/index.js',
    redux:['redux','react-redux']
  },
修改2：
output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath,
      libraryTarget: "umd"//用于外部引入的 react.js 等
  }

删除：
{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: vueLoaderConfig
  }
将：
{
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
  }
修改为：
{
    test: /\.(js|jsx)$/,
    loader: 'babel-loader',
    //include: path.resolve(__dirname, "src"),
      include: resolve("src"),
      exclude: /node_modules/,
    query:{
        presets: ['es2015',"react"],
        plugins:['react-html-attrs']//解决clasName的问题
    }
}
增加：
{
        test:/\.css$/,　　　　　　　　　　　　//对目录里面非node_modules，src/common目录下面的css文件开启模块化，页面里引用时候以模块方式引用
        use:['style-loader',
            {
                //loader: 'css-loader?modules&importLoaders=1&localIdentName=[name]_[local]__[hash:base64:5]',
                loader:'css-loader',
                options: {
                   module: true, //开启css模块化
                    //[path]-[name]-[local]-[hash:base64:6]
                    localIdentName: '[local]-[hash:base64:6]'
                },
            }
        ],
        exclude:[//排除这两个文件夹下面的css文件
            resolve('node_modules'),
            resolve('src/assets/css/common')
        ]
    },{
        test:/\.css$/,
        use:['style-loader','css-loader'],
        include:[//样式只应用到这两个文件夹下面的css文件中
            resolve('node_modules'),
            resolve('src/assets/css/common')
        ]

}
删除:
const vueLoaderConfig = require('./vue-loader.conf')
在这个页面的开头增加：
var PostCompilePlugin = require('webpack-post-compile-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

在module里增加插件
module: {

},
plugins: [
    // ...
    new PostCompilePlugin(),
    new ExtractTextPlugin({
        filename: utils.assetsPath('css/[name].[contenthash].css')
    })
  ]

11、 打开build/webpack.dev.conf.js

将下面代码删除或注释掉
module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },

12、 打开build/webpack.prod.conf.js

将下面代码删除或注释掉
module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true,
      usePostCSS: true
    })
  },

好了已经配置完成了，接下来就是运行测试啦。

在项目中建立文件夹dist,static,src文件夹，在根目录建立index.html文件，在src文件夹下面建立index.js文件。

index.html文件代码如下：
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title id="title">首页</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

index.js文件里的代码如下：
var React=require("react");
var ReactDOM=require("react-dom");
class Index extends React.Component{
    render(){
        return(
            <div>
                Hello World!
            </div>
    );
    }
}
ReactDOM.render(<Index/>,document.getElementById("app"));

然后进入项目根目录下面运行
npm run dev

如果是正式打包上线运行：
npm run build

好啦快去试试吧！

点击下载源码