前端构建之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,// 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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!