开发环境和生产环境整个配置源码在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搭建react项目(开发环境和生产环境)(二)

webpack3中使用postcss-loader和autoprefixer给css3样式添加浏览器兼容

webpack3配置字体图标和打包相关问题

webpack中hash与chunkhash区别和需要注意的问题

最新文章

  1. android 开发项目笔记1
  2. EF实体框架数据操作接口(转)
  3. cs107
  4. CentOS系统将UTC时间修改为CST时间
  5. Mac电脑AndroidStudio使用SVN进行版本控制
  6. 优秀而又实用的PHP工具集锦
  7. 学习MVC的一些随笔简单记录
  8. activiti自定义流程之Spring整合activiti-modeler5.16实例(八):完成个人任务
  9. The Child and Sequence
  10. 如何用SVN进行个人版本管理
  11. 使用JS控制struts的日期控件datetimepicker
  12. log4net发布时assembly引用错误的问题
  13. 手机APP测试思路及测试要点
  14. mysql忘掉密码
  15. lesson - 1 笔记 网络连接 /putty 密钥登陆
  16. UML之部署图
  17. 论文笔记(2):A fast learning algorithm for deep belief nets.
  18. 为什么要花钱学 Python,自学不好吗?
  19. JDBC示例程序
  20. 分区默认segment大小变化(64k—>8M)

热门文章

  1. linux内核学习之四 系统调用
  2. 跨服务器的session共享
  3. 使用uWSGI部署django项目
  4. php并发请求
  5. BZOJ 1042 硬币购物(完全背包+DP)
  6. objective-c自学总结(三)---面向对象的封装,继承与多态
  7. 关于ios越狱开发的那些事
  8. JQuery ajax调用asp.net的webMethod
  9. 模拟springmvc 内部登陆,跳过spring filter
  10. session进程和服务
  11. python版去UTF-8 BOM
  12. switch case default 的使用
  13. webpack 命令行 传入自定义变量
  14. javascript学习-基本类型
  15. Anaconda安装(Windows)
  16. JQuery 的Ajax的使用
  17. 探索guava(一)——前置条件Preconditions类
  18. 每日英语:The Risks of Big Data for Companies
  19. iOS-多语言版本的开发(一)(转载)
  20. Sergey's problem CodeForces - 1019C (图论,构造,神题)