手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)
开发环境和生产环境整个配置源码在github上，源码地址：https://github.com/heyushuo/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中。
配置如下
new HtmlWebpackPlugin({ template: __dirname + '/src/index.template.html' //会以我项目里里的inde.template.html为模板，会在dist路径下生成index.html并引用所有的静态资源。项目输出路径为dist。
})
通过上边的步骤开发环境下的配置已经配置好了我在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上，源码地址：https://github.com/heyushuo/Webpack-React 如果觉得有帮助，点个Star谢谢！！
相关文章：