使用webpack2.0 搭建react.js项目

最近一段时间没有写react.js,发现webpack已经完全升级为2.0了，升级后导致以前的项目不能正常编译，只能重新实践一番

关于webpack2.0和1.x的区别概括起来就是tree shaking , es6, 一堆config文件不同的写法

tree shaking，简单描述就是就是真正意义上的按需打包，webpack1.0时代只要引入的包就打到合并的js文件中，即使是分包也无法处理那些没有使用的model,最后导致打包文件包括很多无用的内容，特别是SPA项目。

通过名叫 “tree-shaking” 的技术使打包的结果只包括实际用到的 exports。Three-shaking 的关键在于依赖 ES6 模块的静态结构。“静态结构”意味着在编译时他们是可分解的，而不用执行它们的任何代码，简单理解是ES6导出的部分如果在其它模块没有调用。

一.create项目

mkdir  project
type nul > package.json

　　

二.安装webpack

npm install webpack --save-dev

三.安装css相关的loader

npm install style-loader css-loader  --save-dev

四.为了开发方便，安装webpack-dev-server

npm install --save-dev webpack-dev-server

　　

五.为了方便编译，需要编译ES6语法和react语法，因为本例使用redux官网的一个列子中的代码，其中有地方用到stage0 stage2,所有还要引入这2个依赖

npm install --save-dev babel-core babel-loader babel-preset-es2015

npm install --save-dev babel-preset-react babel-preset-stage-0 babel-preset-stage-2

这里注意的是.bable文件配置格式从1.0迁移到2.0后变化很大,主要是.babelrc配置格式不同了

1.0可以这么配置，2.0如果这么配置将会报错

{
  presets: ['es2015']
}

正确的配置 modules 表示是否转行为commonjs方式，这里选择false  loose 使编译后的代码不需要完全遵循ES6规定, 简化编译后的代码, 提高代码执行效率，这里可以不使用这个模式

{
  "presets": [
    ["es2015", {"modules": false, "loose": true}],
     "stage-0",
    "stage-2",
    "react"
  ]
}

　

六 react相关

npm install --save-dev react react-dom react-redux redux

　　

　

七.其他有用的依赖

extract-text-webpack-plugin css分包用

html-webpack-plugin 文件js css引入替换模版用

npm install --save-dev path extract-text-webpack-plugin html-webpack-plugin

　

八.webpack文件

关于写法问题，最大的就是使用roles use语法，但是发现babel-loader使用官网介绍的use时候，无法编译语法，有兴趣的可以研究下为什么？

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }
  ]
}　　

官网推荐的使用babel-preset-env这个库，这个库可以制定编译支持什么浏览器，不过我使用后无法识别一些前沿的语法，只能弃用

最后找了个网上的用法，不使用use写法，配置.babelrc文件的写法。

开发环境

const path = require('path'); // 导入路径包
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devtool: 'eval-source-map', //开启sourceMap便于调试
    entry: './src/index.js', //入口文件
    output: {
        path: path.resolve(__dirname, 'build'), // 指定打包之后的文件夹
        filename: '[name].js' // 可以打包为多个文件
    },
    // 使用loader模块
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                'style-loader', {
                    loader: 'css-loader',
                    options: {
                        // modules: true // 设置css模块化,详情参考https://github.com/css-modules/css-modules
                    }
                }
            ]
        }, {
            test: /\.(jsx$|js)$/,
            loader: 'babel-loader',
            exclude: /(node_modules|bower_components)/, //需要排除的目录
            include: __dirname
        }]
    },
    // 配置devServer各种参数
    devServer: {
        hot: true, // 配置HMR之后可以选择开启
        historyApiFallback: true, // 不跳转
        inline: true // 实时刷新
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html' // 模版文件
        }),
        new webpack.HotModuleReplacementPlugin() // 热加载插件
    ]
}

　

生产环境　

const path = require('path'); // 导入路径包
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CleanPlugin = require('clean-webpack-plugin')//webpack插件，用于清除目录文件

module.exports = {
    entry: './src/index.js', //入口文件
    output: {
        path: path.resolve(__dirname, 'build'), // 指定打包之后的文件夹
        filename: '[name]-[hash].js' // 可以打包为多个文件
    },
    // 使用loader模块
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                'style-loader', {
                    loader: 'css-loader',
                    options: {

                    }
                }
            ]
        }, {
            test: /\.(jsx$|js)$/,
            loader: 'babel-loader', //此处不能用use，不知道为啥
            exclude: /(node_modules|bower_components)/, //需要排除的目录
            include: __dirname
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html' // 模版文件
        }),
        new CleanPlugin(['build']),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendors' // 将公共模块提取，生成名为`vendors`的chunk
        }),
        new webpack.optimize.UglifyJsPlugin({ //压缩js代码
            compress: {
                warnings: false
            }
        }),
        new ExtractTextPlugin('[name]-[hash].css'),
        //定义环境变量production,定义后就不不把提示的东西打包进去
        new webpack.DefinePlugin({
            'process.env': {NODE_ENV: '"production"'}
        })
    ]
}

　　

　

例子的地址，仅供学习https://github.com/xiashan17/SPA-REDUX