前言

  搭建好前文的开发环境,已经可以进行开发。然而实际的项目中,不同环境有着不同的构建需求。这里就将开发环境和生产环境的配置单独提取出来,并做一些简单的优化。

  • 分离不同环境公有配置

  不同环境虽然有不同的构建需求,但依然有相同的部分,这里将共同部分提取出来,单独配置,其他环境再合并共有配置即可。安装webpack-merge(用于合并配置)、uglifyjs-webpack-plugin(js代码压缩,这里单独提取出来控制版本)和rimraf(跨平台删除工具)。

npm install webpack-merge uglifyjs-webpack-plugin rimraf --save-dev

  接下来配置共有配置webpack.config.js。

const path = require('path');
const webpack = require('webpack'); module.exports = {
entry: ['babel-polyfill', path.resolve(__dirname, '../src/index.js')],// 指定入口文件,程序从这里开始编译,__dirname当前目录, ../表示上一级目录, ./同级目录
output: {
path: path.resolve(__dirname, '../dist'), // 输出的路径
filename: 'app/[name]_[hash:8].js', // 打包后文件
},
module: {
rules: [
{
enforce: 'pre',
test: /\.(js|jsx)$/,
loader: 'eslint-loader',
exclude: /node_modules/,
},
{
test: /\.(js|jsx)$/,
loader: 'babel-loader', // 加载器
exclude: /node_modules/,
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
],
},
{
test: /\.less$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader',
}, {
loader: 'less-loader',
options: {
sourceMap: true,
},
}],
},
],
},
};

  配置开发环境webpack.dev.config.js。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const merge = require('webpack-merge');
const webpackConfig = require('./webpack.config'); process.env.NODE_ENV = 'development'; module.exports = merge(webpackConfig, {
devtool: 'cheap-module-eval-source-map',
entry: [
'babel-polyfill',
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:9090',
'webpack/hot/only-dev-server',
path.resolve(__dirname, '../src/index.js'),
],
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../src/index.template.html'),
inject: true,
}),
new webpack.NoEmitOnErrorsPlugin(),
],
});

  由于生产环境不需要热更新等,所以入口文件和以前的index.js有所不同。这里在src目录下新建index.prod.js,编辑如下。

/*eslint-disable*/
import React from 'react';
import { render } from 'react-dom';
import 'babel-polyfill';
import App from './App'; const renderDom = Component => {
render(
<Component />,
document.getElementById('app')
);
};
renderDom(App);

  配置生产环境webpack.prod.config.js。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const webpackConfig = require('./webpack.config'); process.env.NODE_ENV = 'production'; module.exports = merge(webpackConfig, {
entry: [
'babel-polyfill',
path.resolve(__dirname, '../src/index.prod.js'),
],
plugins: [
new UglifyJSPlugin({
uglifyOptions: {
output: {
comments: false,
beautify: false,
},
},
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../src/index.template.html'),
inject: true,
minify: {
html5: true,
collapseWhitespace: true,
removeComments: true,
removeTagWhitespace: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
},
}),
],
});

  配置package.json,新建三个执行脚本。

"scripts": {
"dev": "node bin/dev-server",
"build": "npm run clean && webpack --config webpack/webpack.prod.config.js",
"devbuild": "npm run clean && webpack --config webpack/webpack.dev.config.js",
"clean": "rimraf dist"
}
# 启动开发调试
npm run dev
# 开发环境构建
npm run devbuild
# 生产环境构建
npm run build
  • 打包简单优化

  我们在构建的时候,往往希望自己的代码和第三方库分离开来,修改webpack.config.js。

......
entry: {
app: ['babel-polyfill', path.resolve(__dirname, '../src/index.js')],
vendor: ['react', 'react-dom', 'babel-polyfill'],
},
resolve: { // 指定第三方库目录,减少webpack寻找时间
modules: [path.resolve(__dirname, '../node_modules')],
},
......
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity,
}),
],
......

基于webpack的React项目搭建(三)的更多相关文章

  1. 基于webpack的React项目搭建(一)

    前言 工欲善其事,必先利其器.为了更好的学习React,我们先简要的把开发环境搭建起来.本文主要介绍使用webpack搭建React项目,如果你对React或es6的基础语法还不了解,建议先去学习学习 ...

  2. 基于webpack的React项目搭建(二)

    前言 前面我们已经搭建了基础环境,现在将开发环境更完善一些. devtool 在开发的过程,我们会经常调试,so,为了方便我们在chrome中调试源代码,需要更改webpack.config.js,然 ...

  3. 从零搭建基于webpack的Electron-Vue3项目(1)——基于webpack的Vue3项目搭建

    从零搭建基于webpack的Electron-Vue3项目(1)--基于webpack的Vue3项目搭建 前言 本篇文章内容,主要是基于webpack的Vue3项目开发环境进行搭建,暂时还不涉及到El ...

  4. 【转载】基于webpack构建react项目

    第一部分链接:下载所需内容并构建基础的页面 第二部分链接:添加webpack中的一些常用babel和loader 第三部分链接:开发环境与生产环境的配置

  5. 基于webpack的react开发环境搭建新手教程

    最近学习react-webpack项目搭建,找到一篇我认为不错的博客,跟着学习了一番,写得很详细很好,本篇博客纯属记录总结,要看更详细的搭建过程及解析,请戳: 基于webpack的React项目搭建( ...

  6. React项目搭建与部署

    React项目搭建与部署 一,介绍与需求 1.1,介绍 1.1.1,React简介 React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React ...

  7. react项目搭建及webpack配置

    1,配置webpack npm install -g webpack                       webpack的cli环境 npm install -g webpack-dev-se ...

  8. vuejs学习——vue+vuex+vue-router项目搭建(三)

    前言 vuejs学习——vue+vuex+vue-router项目搭建(一) vuejs学习——vue+vuex+vue-router项目搭建(二) 为什么用vuex:组件之间的作用域独立,而组件之间 ...

  9. 基于webpack的vue项目路径别名

    在vue的项目里,我们可以使用../这样的相对路径的方式引用不同目录的组件: import userinfo from '../../../components/userinfo.vue'; 使用.. ...

随机推荐

  1. [高级软件工程教学]团队Beta阶段成绩汇总

    一.作业地址: https://edu.cnblogs.com/campus/fzu/AdvancedSoftwareEngineering/homework/1501 二.Beta冲刺课堂答辩 1. ...

  2. 201621123050 《Java程序设计》第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 面向系统综合设计-图书馆管理系统或购物车 使用流与文件改造你的图书馆管理系统或购物车. 2.1 简述如何 ...

  3. nyoj 数的长度

    描述 N!阶乘是一个非常大的数,大家都知道计算公式是N!=N*(N-1)······*2*1.现在你的任务是计算出N!的位数有多少(十进制)?   输入 首行输入n,表示有多少组测试数据(n<1 ...

  4. java截取一个字符串正数或倒数某个特定字符前后的内容

    取出正数第二个“.”后面的内容 public class TestCode { public static void main(String[] args) { String str ="2 ...

  5. JAVA_SE基础——47.接口

    如果一个抽象类中的所有方法都是抽象的,则可以将这个类用另一种方法来定义,即接口~ 在定义接口时,需要用interface关键字来声明,具体实例如code1 接口的定义格式:interface 接口名{ ...

  6. jsMath对象

    Math对象: abs.用来求绝对值. ceil:用来向上取整. floor:用来向下取整. round:用来四舍五入取近似值. sqrt:用来开方. pow:括号内有2位参数.如pow(2,5)表示 ...

  7. Mego(1) - NET中主流ORM框架性能对比

    从刚刚开始接触ORM到现在已有超过八年时间,用过了不少ORM框架也了解了不少ORM框架,看过N种关于ORM框架的相关资料与评论,各种言论让人很难选择.在ORM的众多问题中最突出的问题是关于性能方面的问 ...

  8. Linq GroupBy

    //Linq //var result = from p in personList // group p by p.Id // into grouped // select new { Id = g ...

  9. Sphinx主索引和增量索引来实现索引实时更新的关键步骤

    1.配置csft.conf文件 vim /etc/csft.conf # # Minimal Sphinx configuration sample (clean, simple, functiona ...

  10. 新概念英语(1-107)It's Too Small.

    Lesson 107 It's too small. 太小了. Listen to the tape then answer this question. What kind of dress doe ...