react基础：react0.14.7+webpack开发生产环境的区别

发表于   |   分类于   |  

前言

因为在开发环境使用了webpack的动态加载，所以在正式部署的生产环境，配置文件要做相应的调整。

目录

首先贴出我的文件目录结构

1
2
3
4
5
6
7
8
9
10
11
+ 工程名
  + app        //开发文件目录
     - mian.js //js入口
  + build      //生产环境打包地址
     - build.js //打包之后的文件
     - index.html
  + dev         //开发环境打包地址
     - dev.js  //打包之后的文件
     - index.html 
  + webpack.config.js   //开发配置文件
  + webpack.config.prod.js  //生产配置文件

配置文件

packkage.json文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
{
  "name": "7pluszhifu",
  "version": "1.0.0",
  "description": "7+的付费工程",
  "main": "./index.js",
  "scripts": {
    "build": "webpack --config webpack.config.prod.js -p --content-base build",
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base dev"
  },
  "author": "hammercui",
  "license": "ISC",

  "dependencies": {
    "babel-runtime": "^6.5.0",
    "react": "^0.14.7",
    "react-dom": "^0.14.7"
  },
  "devDependencies": {
    "amazeui-react": "^1.0.1",
    "babel-core": "^6.7.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "css-loader": "^0.23.1",
    "material-ui": "^0.15.0-alpha.2",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-hot-loader": "^1.3.0",
    "react-tap-event-plugin": "^0.2.2",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  }
}

开发环境配置文件webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
/**
 * Created by hammer on 2016/3/26.
 * 配置的打包文件
 */
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common','common.js');
var path = require('path');

var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');

module.exports = {
    //插件项
    plugins: [
        //commonsPlugin,
        new webpack.NoErrorsPlugin()
    ],
    //页面入口文件配置
    //entry: {mian : './app/main.js'},
    entry:[
        'webpack/hot/dev-server',
        path.resolve(__dirname,'app/main.js')
    ],

    //入口文件输出配置
    //output: {path: __dirname+'_build_', filename: '[name].js'}
    output:{
        path: path.resolve(__dirname,'dev'),
        filename: 'dev.js'
    },

    devServer: {
        inline: true,
        port: 7777
    },

    module: {
        //加载器配置
        loaders: [
            //LESS文件先通过less-load处理成css，然后再通过css-loader加载成css模块，最后由style-loader加载器对其做最后的处理，
            // 从而运行时可以通过style标签将其应用到最终的浏览器环境
            {test: /\.less/, loader: 'style-loader!css-loader!less-loader'},
            //.css 文件使用 style-loader 和 css-loader 来处理
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            //.js 文件使用 jsx-loader 来编译处理 jsx-loader可以添加?harmony参数使其支持ES6语法
            { test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query:{
                    presets:['es2015','react']
                } //备注：es2015用于支持ES6语法，react用于解决render()报错的问题
            },
            //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            //图片文件使用 url-loader 来处理，小于8kb的直接转为base64
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ],
        noParse: [pathToReact]
    },
    //其它解决方案配置
    resolve: {
        //查找module的话从这里开始查找
        //root: 'E:/github/flux-example/app', //绝对路径
        //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
        extensions: ['', '.js', '.json', '.scss'],
        //模块别名定义，方便后续直接引用别名，无须多写长长的地址
        alias: {
            AppStore : 'js/stores/AppStores.js',
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js',
            //'react': pathToReact,
           // 'react-dom':pathToReactDom,
        }
    }
};

生产环境配置文件webpack.config.prod.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/**
 * Created by hammer on 2016/4/4.
 * 生产环境配置文件
 */
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common','common.js');
var path = require('path');

var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');

module.exports = {
    //插件项
    plugins: [
        //commonsPlugin,
        new webpack.NoErrorsPlugin()
    ],
    //页面入口文件配置
    //entry: {mian : './app/main.js'},
    entry:[
        path.resolve(__dirname,'app/main.js')
    ],

    //入口文件输出配置
    //output: {path: __dirname+'_build_', filename: '[name].js'}
    output:{
        path: path.resolve(__dirname,'build'),
        filename: 'build.js'
    },

    module: {
        //加载器配置
        loaders: [
            //LESS文件先通过less-load处理成css，然后再通过css-loader加载成css模块，最后由style-loader加载器对其做最后的处理，
            // 从而运行时可以通过style标签将其应用到最终的浏览器环境
            {test: /\.less/, loader: 'style-loader!css-loader!less-loader'},
            //.css 文件使用 style-loader 和 css-loader 来处理
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            //.js 文件使用 jsx-loader 来编译处理 jsx-loader可以添加?harmony参数使其支持ES6语法
            { test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query:{
                    presets:['es2015','react']
                } //备注：es2015用于支持ES6语法，react用于解决render()报错的问题
            },
            //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            //图片文件使用 url-loader 来处理，小于8kb的直接转为base64
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ],
        noParse: [pathToReact]
    },
    //其它解决方案配置
    resolve: {
        //查找module的话从这里开始查找
        //root: 'E:/github/flux-example/app', //绝对路径
        //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
        extensions: ['', '.js', '.json', '.scss'],
        //模块别名定义，方便后续直接引用别名，无须多写长长的地址
        alias: {
            AppStore : 'js/stores/AppStores.js',
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js',
            //'react': pathToReact,
            // 'react-dom':pathToReactDom,
        }
    }
};

打包生成js文件

开发环境

执行npm run dev
然后浏览器输入http：//localhost：7777/

生产环境

执行npm run build，会在build目录生成build.js文件