前端构建之webpack+react使用

webpack+react 构建流程 确保已安装最新稳定版node.js
- 设置淘宝npm镜像,通过cnpm代替npm命令快速下载

$npm install -g cnpm --registry=https://registry.npm.taobao.org

• 新建项目目录，在目录下执行

$cnpm init

• 安装webpack 和调试工具

$cnpm install webpack --save -g
//测试服务器插件
$cnpm install webpack-dev-server --save-dev
$cnpm install react-hot-loader --save-dev

• 安装loader组件

$cnpm install babel-loader babel-core
//es6兼容
babel-preset-es2015 --save-dev
//load css
$cnpm install css-loader style-loader --save-dev
//load file 
$cnpm install file-loader --save-dev
$cnpm install url-loader --save-dev
$cnpm install expose-loader --save

• 安装webpack插件

//可使css分离 加载插件
$cnpm install extract-text-webpack-plugin --save-dev
//文件移动插件
$cnpm install transfer-webpack-plugin --save-dev
//html生成插件
$cnpm install html-webpack-plugin --save-dev

• 安装react

//react 安装
$cnpm install react react-dom --save
//es6转码器插件
$cnpm install babel-preset-react --save

• 安装jquery

$cnpm install jquery --save

• 文档目录结构

--app
    --dist
        data.json
        index.html
    --src
        index.css
        index.js
        list.js
    webpack.config.dev.js

• webpack.config.dev.js配置文件如下

const webpack = require('webpack');
const path = require('path');
const ROOT_PATH = path.resolve(__dirname);
const MODULES_PATH = path.join(ROOT_PATH, './node_modules'); // node包目录
const BUILD_PATH = path.join(ROOT_PATH, './app/dist/assets'); // 最后打包目录
//分离CSS插件
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: {
        index: './app/src/index.js',
        common: ["react","react-dom","jquery"]
    },
    output: {
        path: BUILD_PATH, // 设置输出目录
        filename: '[name].bundle.js', // 输出文件名
    },
    resolve: {
        modulesDirectories: ['node_modules', path.join(__dirname, 'node_modules')],
        extensions: ['','.web.js', '.js', '.jsx', '.json']//配置解析文件后缀
    },
    module: {
        loaders: [
            // css
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
            },
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: ['babel-loader'],
                query: {
                    presets: ['react', 'es2015']
                }
            },
            // image & font
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                loader: 'url-loader?limit=8192&name=[name].[ext]'
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loader: 'url-loader?limit=8192&name=[name].[ext]'
            },
            // expose-loader将jquery变量从依赖包中暴露出来
            {
                test: require.resolve("jquery"),
                loader: "expose?$!expose?jQuery"
            }

        ]
    },
    plugins: [
        // 插件
        new ExtractTextPlugin('[name].bundle.css', {
            allChunks: true
        }),
        new webpack.HotModuleReplacementPlugin(),//热加载
        // 把jquery作为全局变量插入到所有的代码中
        // 然后就可以直接在页面中使用jQuery了
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }),
        // public sources
        new webpack.optimize.CommonsChunkPlugin({
            // 与 entry 对应
            name: 'common',
            // 输出的公共资源名称
            filename: 'common.bundle.js',
            // 对所有entry实行这个规则
            minChunks: Infinity
        }),
        new webpack.NoErrorsPlugin()
    ],
    //使用webpack-dev-server，提高开发效率
    devServer: {
        contentBase: './app/dist',
        host: '0.0.0.0',
        port: 3200,
        inline: true,
        hot: true,
    }
};

示例下载：webpack+react 脚手架
- 快速构建：在本测试项目目录下

$cnpm install
$cnpm start