webpack配置出react

前端人员都知道，webpack能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。

比如但我我就是喜欢vue的webpack，但是我需要用react做项目，那么怎么办？

不用着急，以下就是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-dombabelify babel-preset-react

mac：sudo npm install --save-dev react react-dombabelify babel-preset-react

3、安装babel-preset-es2015(可跳过)

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

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

4、局部安装(可跳过)

window：npm install webpack --save-dev

mac：sudo npm install webpack --save-dev

5、局部安装webpack-dev-server(可跳过)

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

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

6、修改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",

 "whatwg-fetch": "^2.0.3"

 },

 "dependencies": {

 "ant-mobile": "0.0.0",

 "antd-mobile-demo-data": "^0.2.0",

 "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"

 }

7、执行：

windows：npm install

mac：sudo npm install

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

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

{

 "presets": [

 ["env", {

 "modules": false,

 "targets": {

 "browsers": ["> 1%", "last 2 versions", "not ie<= 8"]

 }

 }],

 "stage-2"

 ],

 "plugins": ["transform-runtime"]

}

10、    打开build/utils.js

修改1：

constcssLoader = {

 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 cssbgimg 加载路径不对问题

 fallback: 'react-style-loader'// 修改vue-style-loader

 })

 } else {

 return ['react-style-loader'].concat(loaders)// 修改vue-style-loader

 }

 }

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

修改1：

entry: {

 babel: ['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')

 ]

}

删除:

constvueLoaderConfig = require('./vue-loader.conf')

在这个页面的开头增加：

varPostCompilePlugin = require('webpack-post-compile-plugin');

constExtractTextPlugin = require("extract-text-webpack-plugin");

在module里增加插件

module: {

},

plugins: [

 // ...

 new PostCompilePlugin(),

 new ExtractTextPlugin({

 filename: utils.assetsPath('css/[name].[contenthash].css')

 })

 ]

12、    打开build/webpack.dev.conf.js将下面代码删除或注释掉

module: {

 rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })

 },

13、    打开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");

varReactDOM=require("react-dom");

class Index extends React.Component{

render(){

return(

 Hello World!

 );

 }

}

ReactDOM.render(,document.getElementById("app"));

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

npm run dev

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

npm run build

ok，咱们这样就可以在react上使用webpack了，是不是很简单！

前端爱好者加微信  13717840919