webpack2 打包 react

1、新建三个文件结构如下：  或者 你可以去下载我打包之后的文件 下载  然后把里面  除这三个文件外的文件删掉

webpack.config.js

var webpack=require('webpack');
//var HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const BEFORE_PATH = path.join(__dirname, './script/'); // 输出前的路径
const BUILD_PATH = path.join(__dirname, './js/'); // 最后输出放置公共资源的目录
module.exports = {
	devtool: false,//配置生成Source Maps，选择合适的选项
    entry: {
    	main:BEFORE_PATH+"main.js"
    },
    output: {
        path: BUILD_PATH,
        filename: '[name].js'
    },
    module: {
        loaders: [
            {
                test: /\.js|jsx$/,   //是一个正则，代表js或者jsx后缀的文件要使用
                loader: 'babel-loader',
                query:{
                    presets:['es2015','react','stage-0'] //必须先安装babel-preset-es2015和babel-preset-react
                }
            },
            {
                test: /\.css$/,
                loaders: ['style', 'css'],  //必须先安装css-loader和style-loader
　　　　　　 },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url',
                query: {
                  limit: 10000,
                  name: './build/img/[name].[hash:7].[ext]'
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url',
                query: {
                  limit: 10000,
                  name: './build/fonts/[name].[hash:7].[ext]'
                }
            }　　　　
 　　　　] 
    },
    plugins:[
    	new webpack.DefinePlugin({ // <-- 减少 React 大小的关键
		  'process.env': {
			'NODE_ENV': JSON.stringify('production')
		  }
		}),
		new webpack.optimize.DedupePlugin(), //删除类似的重复代码
		new webpack.optimize.UglifyJsPlugin(), //最小化一切
		new webpack.optimize.AggressiveMergingPlugin()//合并块
    ]
};

index.html

script/main.js

// main.js
import React from 'react'
import { render } from 'react-dom'
render(
  
Hello, world!
,
  document.getElementById('example')
);

/*
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
  
Hello, world!
,
  document.getElementById('example')
);

*/

2、打开cmd命令符    依次输入

e:
cd E:\work\test\webpack\react-demo2-again
npm install webpack -g 
npm install cnpm -g --registry=https://registry.npm.taobao.org 
cnpm install webpack --save-dev 
npm install webpack webpack-dev-server babel -g  
npm install react react-dom babel-loader less-loader css-loader style-loader url-loader file-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-0  expose-loader imports-loader script-loader jquery ajv --save-dev    
npm install extract-text-webpack-plugin
npm install compression-webpack-plugin

npm install cnpm
cnpm install node-sass
cnpm install postcss-loader
cnpm install style-loader --save
cnpm install sass-loader
cnpm install css-loader --save

webpack

这段话我是这么理解的

1、打开E盘

2、打开E盘里的 的项目目录  react-demo2-again

3、安装更新 webpack 

4、下载淘宝镜像

5、用淘宝镜像安装webpack 

6、安装babel  控件

7~9、加载各个loader 

10-15、引入css  sass依赖的

16、编译生成