前端人员都知道，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
