webpack 开发环境与生成环境的 配置
写在前面
最近学习react,之前做vue项目的时候,一直都是拿来主义,浑浑噩噩,感觉不太好,趁学习react的机会,在顺带学习一下webpack。一般配置文件分两份,为开发环境和生成环境。有此区分,是为了更好的利用缓存,生成环境将所有的第三分库文件打包成一个,所有的业务逻辑的文件就会单独生成一个,每次业务逻辑的修改之后,在生成环境中只需要上传修改代码逻辑的部分,而第三方库文件则不会修改,如此只需更新少量的代码,增加加载的速度。
webpack.config.js 开发开发环境的配置
package.json文件的内容
{
"name": "react-dianping-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "NODE_ENV=dev webpack-dev-server --progress --colors",
"build": "rm -rf ./build && NODE_ENV=production webpack --config ./webpack.production.config.js --progress --colors"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^6.4.0",
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-plugin-react-transform": "^2.0.2",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"css-loader": "^0.24.0",
"eslint": "^3.4.0",
"eslint-loader": "^1.5.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.22.0",
"json-loader": "^0.5.4",
"koa": "^1.2.2",
"koa-router": "^5.4.0",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"open-browser-webpack-plugin": "0.0.2",
"postcss-loader": "^0.11.0",
"react-transform-hmr": "^1.0.4",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.15.0"
},
"dependencies": {
"react": "^15.3.1",
"react-dom": "^15.3.1"
}
}
weboack.config.js文件的配置
var path =require('path')
var webpack = require('webpack') // 在package.json之中(dev)dependencies的名字,main
var HtmlWebpackPlugin = require('html-webpack-plugin') // 可以指定打包完成之后的js文件的挂载点
var OpenBrowserPlugin = require('open-browser-webpack-plugin') // 浏览器自动打开文件
module.exports = {
entry:path.resolve(__dirname,'app/index.jsx'), // 打包入口文件
output:{
filename:"bundle.js"
},
resolve:{
extensions:['','js','jsx'],// require 或者import的时候,不需要添加的文件后缀名
},
module:{
loaders:[
{test:/\.(js|jsx)$/,exclude:/node_modules/,loader:'babel'},
{test:/\.less$/,exclude:/node_modules/,loader:'style!css!postcss!less'},// css-loader引入css文件,style-loader创建style标签,从右向左执行,顺序不可改变。
{test:/\.css$/,exclude:/node_modules/,loader:'style!css!postcss'},
{test:/\.(png|gif|jpg|jpeg|bmp)$/i,exclude:/node_modules/,loader:'url-loader?limit=5000'}, // Loads files as `base64` encoded URL
{test:/\.(png|woff|woff2|svg|ttf|eot)($|\?)/i,exclude:/node_modules/,loader:'url-loader?limit=5000'}
]
},
postcss:[
require('autoprefixer') //调用autoprefixer插件,例如 display: flex
],
plugins:[
// html 模板插件
new HtmlWebpackPlugin({
template:__dirname+ '/app/index.tmpl.html'
}),
// 热加载插件,即不用刷新浏览器便可以展现修改
new webpack.HotModuleReplacementPlugin(),
// 运行终端就可以打开文件
new OpenBrowserPlugin({
url: 'http://localhost:8080'
}),
// 定义生产环境还是开发环境,一般是配合package.json之中的script标签的使用
new webpack.DefinePlugin({
__DEV__:JSON.stringify(JSON.parse((ProgressEvent.evn.NODE_DEV == "dev") || false))
})
],
devServer: {
colors: true, //终端中输出结果为彩色
historyApiFallback: true, //不跳转,在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html
inline: true, //实时刷新
hot: true // 使用热加载插件 HotModuleReplacementPlugin
}
}
生产环境中的webpack.production.config.js的配置
var pkg = require('./package.json')
var path = require('path')
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
app: path.resolve(__dirname, 'app/index.jsx'),
// 将 第三方依赖(node_modules中的) 单独打包
vendor: Object.keys(pkg.dependencies)
},
output: {
path: __dirname + "/build",
filename: "/js/[name].[chunkhash:8].js"
},
resolve:{
extensions:['', '.js','.jsx']
},
module: {
loaders: [
{ test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel' },
{ test: /\.less$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract('style', 'css!postcss!less') },
{ test: /\.css$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract('style', 'css!postcss') },
{ test:/\.(png|gif|jpg|jpeg|bmp)$/i, loader:'url-loader?limit=5000&name=img/[name].[chunkhash:8].[ext]' },
{ test:/\.(png|woff|woff2|svg|ttf|eot)($|\?)/i, loader:'url-loader?limit=5000&name=fonts/[name].[chunkhash:8].[ext]'}
]
},
postcss: [
require('autoprefixer')
],
plugins: [
// webpack 内置的 banner-plugin
new webpack.BannerPlugin("Copyright by wangfupeng1988@github.com."),
// html 模板插件
new HtmlWebpackPlugin({
template: __dirname + '/app/index.tmpl.html'
}),
// 定义为生产环境,编译 React 时压缩到最小
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}
}),
// 为组件分配ID,通过这个插件webpack可以分析和优先考虑使用最多的模块,并为它们分配最小的ID
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
//supresses warnings, usually from module minification
warnings: false
}
}),
// 分离CSS和JS文件
new ExtractTextPlugin('/css/[name].[chunkhash:8].css'),
// 提供公共代码
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: '/js/[name].[chunkhash:8].js'
}),
// 可在业务 js 代码中使用 __DEV__ 判断是否是dev模式(dev模式下可以提示错误、测试报告等, production模式不提示)
new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false'))
})
]
}
webpack 开发环境与生成环境的 配置的更多相关文章
- vue wabpack 切换开发环境 和生成环境 的接口地址
/config/dev.env.js 新增一行 var merge = require('webpack-merge') var prodEnv = require('./prod.env') mod ...
- 分离Webpack开发环境与生产环境的配置
这是Webpack+React系列配置过程记录的第五篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- centos7.2环境nginx+mysql+php-fpm+svn配置walle自动化部署系统详解
centos7.2环境nginx+mysql+php-fpm+svn配置walle自动化部署系统详解 操作系统:centos 7.2 x86_64 安装walle系统服务端 1.以下安装,均在宿主机( ...
- 第一篇 Postman的初级使用之设置环境快速切换生成环境与测试环境
POSTMAN是有谷歌的开源工具,在开发调试.测试执行过程中使用频率非常广泛,本文将记录一些postman在测试中常见的一些配置和使用方法 一.基本的页面区域 略,很简单,大家都会看,再有,学习下面的 ...
- webpack开发与生产环境配置
前言 作者去年就开始使用webpack, 最早的接触就来自于vue-cli.那个时候工作重点主要也是 vue 的使用,对webpack的配置是知之甚少,期间有问题也是询问大牛 @吕大豹.顺便说一句,对 ...
- 从零开始配置TypeScript + React + React-Router + Redux + Webpack开发环境
转载请注明出处! 说在前面的话: 1.为什么不使用现成的脚手架?脚手架配置的东西太多太重了,一股脑全塞给你,我只想先用一些我能懂的库和插件,然后慢慢的添加其他的.而且自己从零开始配置也能学到更多的东西 ...
- Webpack配置区分开发环境和生产环境
在项目开发的时候,我们通常会将程序分为开发环境和生产环境(或者叫线上环境),开发环境通常指的是我们正在开发的这个阶段所需要的一些环境配置,也就是方便我们开发人员调试开发的一种环境:生产环境通常指的是我 ...
- webpack开发环境配置和生产环境配置
开发环境配置 在开发环境下,我们首先考虑的是方便开发,方便代码调试,不需要考虑代码合并和css样式分离这些. 这里主要说三个 :1.css模块化:2.模块热替换功能:3.source-map(代码映射 ...
- webpack深入场景——开发环境和生产环境配置
以前自己写一小项目时,webpack的配置基本就是一套配置,没有考虑生产环境和开发环境的区分,最近在做一个复杂的商城项目接触到了webpack的高级配置,经过两天的研究,写出了一份目前来说比叫满意的配 ...
随机推荐
- 关于springmvc json交互产生的406错误
产生错误的背景:springmvc使用<mvc:annotation-driven>进行配置,那么只要引入响应的json解析包就可以了.在pom中已经引入了如下: <dependen ...
- Beego学习笔记
Beego学习笔记 Go 路由(Controller) 路由就是根据用户的请求找到需要执行的函数或者controller. Get /v1/shop/nike ShopController Get D ...
- Maven_3 如何从Maven远程存储库下载
如果在你的项目中,需要使用到的jar包. 如果使用build path的话,你把你的项目给别人运行的时候,别人还需要去build path,如果要换jar包的版本,这些都是比较麻烦的,所以我们使用ma ...
- Apollo 3 定时/长轮询拉取配置的设计
前言 如上图所示,Apollo portal 更新配置后,进行轮询的客户端获取更新通知,然后再调用接口获取最新配置.不仅仅只有轮询,还有定时更新(默认 5 分钟一次).目的就是让客户端能够稳定的获取到 ...
- 模拟HTTP协议接收请求并返回信息
private string HttpPost(string Url, string postDataStr) { HttpWebRequest request = (HttpWebRequest)W ...
- elasticsearch6.7 05. Document APIs(1)data replication model
data replication model 本节首先简要介绍Elasticsearch的data replication model,然后详细描述以下CRUD api: 1.读写文档(Reading ...
- Matlab 如何输入矩阵
A=[1 2 3;4 5 6;7 8 9],每行之间用分号隔开 也可以用循环控制输入 n=input('请输入矩阵阶数:') for i=1:n for j=1:n a(i,j ...
- canvas离屏技术与放大镜实现
教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步>>> (原文)canvas 离屏技术与放大镜实现. 更多讨论或者错误提交,也请移步. 利用canvas除了可以实现 ...
- TCP握手过程中建连接的流程和队列
这里有两个队列:syns queue(半连接队列):accept queue(全连接队列). 三次握手过程中: 第一步: server 收到 client 的 syn 后,把这个连接信息放到半连接队列 ...
- csharp: sum columns or rows in a dataTable
DataTable dt = setData(); // Sum rows. //foreach (DataRow row in dt.Rows) //{ // int rowTotal = 0; / ...