webpack--react配置

{ ?"name": "test", ?"version": "1.0.0", ?"description": "测试", ?"main": "index.js", ?"scripts": { ???"test": "echo \"Error: no test specified\" && exit 1", ???"start": "Webpack-dev-server" ?}, ?"author": "zhangzhicheng", ?"license": "ISC", ?"dependencies": { ???"react": "^16.2.0", ???"react-dom": "^16.2.0" ?}, ?"devDependencies": { ???"babel-cli": "^6.26.0", ???"babel-core": "^6.26.0", ???"babel-loader": "^7.1.4", ???"babel-plugin-react-html-attrs": "^2.1.0", ???"babel-preset-env": "^1.6.1", ???"babel-preset-react": "^6.24.1", ???"css-loader": "^0.28.7", ???"extract-text-webpack-plugin": "^3.0.2", ???"html-webpack-plugin": "^2.30.1", ???"less": "^3.0.1", ???"less-loader": "^4.1.0", ???"postcss-loader": "^2.0.9", ???"style-loader": "^0.19.1", ???"webpack": "^3.10.0", ???"webpack-dev-server": "^2.9.7" ?}}

const debug = process.env.NODE_ENV !== "production";const webpack = require(‘webpack‘);const path = require(‘path‘);module.exports = { ?entry: ‘./src/index.js‘, ?output: { ???path: path.resolve(__dirname, ‘dist‘), ???filename: ‘bundle.js‘ ?}, ?module: { ?????rules: [ ???????{ ?????????test: /\.js$/, ?????????exclude: /(node_modules|bower_components)/, ?????????use: { ???????????loader: ‘babel-loader‘ ?????????} ???????}, ???????{ ???????test: /\.css$/, ???????use: [ ?????????‘style-loader‘, ?????????{ loader: ‘css-loader‘, options: { importLoaders: 1 } }, ?????????{ ?????????????loader: ‘postcss-loader‘, ?????????????options: { ???????????????ident: ‘postcss‘, ???????????????plugins: (loader) => [ ?????????????????require(‘autoprefixer‘)() ???????????????] ?????????????} ???????????} ???????????] ???????}, ???????{ ???????test: /\.less$/, ???????use: [ ?????????‘style-loader‘, ?????????{ loader: ‘css-loader‘, options: { importLoaders: 1 } }, ?????????{ ?????????????loader: ‘postcss-loader‘, ?????????????options: { ???????????????ident: ‘postcss‘, ???????????????plugins: (loader) => [ ?????????????????require(‘autoprefixer‘)() ???????????????] ?????????????} ???????????}, ???????????‘less-loader‘, ???????] ?????} ?????] ???}, ???devServer: { ?????contentBase: path.join(__dirname, "dist"), ?????compress: true, ?????port: 9000, ?????hot: true, ?????inline: true ???}, ???plugins: [ ???new webpack.optimize.DedupePlugin(), ???new webpack.optimize.OccurrenceOrderPlugin(), ???new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), ???new webpack.HotModuleReplacementPlugin() ?] ???};/*以上是使用less+babel+react配置启动webpack-dev-server配置devServer基本上配置webpack都去官网和各模块官网复制粘贴就可以了，都有推荐配置而postcss-loader这个自定义一些css预处理方式，可以和less\sass\stylus配合使用 *//*如果你使用了一些有着很酷的依赖树的库，那么它可能存在一些文件是重复的。webpack可以找到这些文件并去重。这保证了重复的代码不被大包到bundle文件里面去，取而代之的是运行时请求一个封装的函数webpack.optimize.DedupePlugin()根据模块调用次数，给模块分配ids，常被调用的ids分配更短的id，使得ids可预测，降低文件大小，该模块推荐使用OccurrenceOrderPlugin压缩jsUglifyJsPlugin热替换模块，使用热替换使用的HotModuleReplacementPlugin*/

{ ?"presets": ["react","env"], ?"plugins": [ ???"react-html-attrs" ?]}