开发环境和生产环境整个配置源码在github上，源码地址：github-webpack-react 如果觉得有帮助，点个Star谢谢！！
(一)是开发环境，(二)是生产环境。
一、首先创建package.json并且安装webpack和webpack-dev-server
//不用你书写任何，直接帮你创建一个最简单的package.json文件
npm init -y//webpack必须，webpack-dev-server开启服务热加载做代理npm install --save-dev webpack webpack-dev-server
只要下载的是工具类的，需要--save-dev，项目依赖的例如：react这些不需要写--save-dev
接下来开始配置一个完整项目需要配置的各项。先贴出我的项目目录
二、webpack的入口，出口和devserver的配置
var path = require(‘path‘);//node提供的一块方法
var webpack = require(‘webpack‘);
var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
module.exports = {
entry:‘./src/index.jsx‘, ?????????????????????//这是入口文件output: { ????path: path.resolve(__dirname, ‘dist‘), ??//打包后文件的输出路径 ????filename: ‘bundle.js‘, ??????????????????//输出文件名字，开发环境直接把输出名字固定}， devServer:{
contentBase:‘./dist‘, //指定服务开启的位置，在dist文件夹中
historyApiFallback: true, //不跳转，在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，任意的 404 响应都可能需要被替代为 index.html
??????? inline: true, //实时刷新
??????? port:8000, //默认8080
??????? proxy:{ //代理属性
??????????? "/api":{
??????????????? target:‘http://localhost:9000/‘,
??????????????? pathRewrite: {"^/api":""}
?????????????? /* 因为在 ajax 的 url 中加了前缀 ‘/api‘，而原本的接口是没有这个前缀的
所以需要通过 pathRewrite 来重写地址，将前缀 ‘/api‘ 转为 ‘‘ */
??????????? }
??????? }
??? }
}
三、配置js，es6和jsx的编译
//js的loader加载器还有es6转es5，如果react开发需要下载 babel-preset-react
npm install babel-core babel-loader babel-preset-env babel-preset-react --save-dev
//babel相关插件配置
npm install --save-dev babel-plugin-transform-runtime babel-preset-stage-0
配置如下:
{ ????test: /\.(js|jsx)$/, ??????????//匹配所有的js和jsx ?????exclude:/node_modules/, ??????//除了这个文件夹外 ?????use: { ?????????loader: "babel-loader" ???//babel的相关配置在.babelrc文件里 ??????} ?}.babelrc文件的配置如下
{ ?"presets": [ ???"env", ???"react", ???"stage-0" ?], ?"plugins": ["transform-runtime"]}想要跟深入了解babel的配置的可以查看此文章对英文版的翻译连接地址：https://excaliburhan.com/post/babel-preset-and-plugins.html
四、配置css，sass，postcss和autoprefixer
//css的loader转换器和style的loader转换器
npm install --save-dev css-loader style-loader
//因为sass-loader依赖于node-sass，所以还要安装node-sass,postcss-loader autoprefixer postcss 添加浏览器兼容
npm install --save-dev sass-loader node-sass postcss-loader autoprefixer postcss
配置如下所示
//配置css { ???test: /\.css$/, ???use: [ ????????‘style-loader‘, ???????{loader: ‘css-loader‘，,options: {importLoaders: 1}}, ???????{loader: ‘postcss-loader‘,options:{ident:"postcss",plugins:[require("autoprefixer")("last 100 versions")]}} ??????] }, //配置scss ?执行顺序是从右往走的这个顺序是不能改变的 ?{ ????test: /\.scss$/, ????use: [ ?????????????‘style-loader‘, ?????????????{loader: ‘css-loader‘,options: {importLoaders: 2}}, //css-loader后还需要2个loader ?????????????{loader: ‘postcss-loader‘,options:{ident:"postcss",plugins:[require("autoprefixer")("last 100 versions")]}}, ?????????????‘sass-loader‘ ????????????] ??}关于postcss的配置详情可以查看我的另一篇博客：webpack3中使用postcss-loader和autoprefixer给css3样式添加浏览器兼容
五、配置图片和字体图标
npm install --save-dev url-loader
url-loader主要为了解决图片过多，http请求增加导致性能降低，他主要的原理是将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了，官网描述url-loader封装了file-loader（这个loader主要用户把一个文件不任何处理知识转移位置用），这就体现了url-loader的limit的参数的作用，具体工作步骤是1.文件大小小于limit参数，url-loader将会把文件转为DataURL；2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。因此我们只需要安装url-loader即可。
配置如下
//配置图片 { ????test:/\.(jpg|png|gif|jpeg|bmp)$/, ????use:{ ??????????loader:‘url-loader‘, ??????????options: { ??????????????????????limit: 8192 ???//限制图片的大小 ???????????????????} ?????????} ?}, ??//配置字体图标 ??{ ?????test:/\.(woff|woff2|svg|ttf|eot)$/, ?????use:{ ?????????????loader:‘url-loader‘, ?????????????options: { ???????????????????????limit: 10000, ?//开发环境下这里足够大就可以，直接把字体图标打包到文件里，开发环境就需要单独打包了下一节会讲 ????????????????} ??????????} ??},想了解具体的可以看我写的另一篇文章：webpack3配置字体图标和打包相关问题
六、最后一步使用插件html-webpack-plugin
npm install --save-dev html-webpack-plugin
这个插件的作用就是用来生成html的，并且会自动帮你把打包后的静态文件引入的html中。
配置如下
//会以我项目里里的inde.template.html为模板，会在dist路径下生成index.html并引用所有的静态资源。项目输出路径为dist。
new HtmlWebpackPlugin({ ????template: __dirname + ‘/src/index.template.html‘
})
通过上边的步骤开发环境下的配置已经配置好了我在package.json文件中添加了如下：
"scripts": { ???"test": "echo \"Error: no test specified\" && exit 1", ???"start": "webpack-dev-server --hot --colors --inline --open", ?//直接执行npm start 项目就开启了，默认打开的是webpack.config.js ???"build": "rimraf dist && webpack --config webpack.dev.js" ?????//npm run build 打包项目先删除dist文件夹，然后在运行webpack.dev.js ?}
现在直接npm start 项目就开启了
开发环境和生产环境整个配置源码在github上，源码地址：github-webpack-react 如果觉得有帮助，点个Star谢谢！！
相关文章：
webpack3配置字体图标和打包相关问题
webpack中hash与chunkhash区别和需要注意的问题
手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)
原文地址：https://www.cnblogs.com/heyushuo/p/8552983.html