React:React+Webpack

搭建react+webpack项目所需安装插件

webpack webpack-dev-server -g 全局依赖；

• webpack webpack-dev-server --save-dev 项目依赖
• babel需要的插件：
  1、babel-loader babel-core babel-cli
  2、es6兼容 babel-preset-es2015/babel-preset-env
  3、支持箭头函数，扩展运算符...
  babel-preset-stage-0
  4、编译css： style-loader css-loader
  5、编译react: babel-preset-react
  6、编译字体图标和图片：url-loader file-loader
  7、编译less: less less-loader
• 打包的其他插件
  1、html-webpack-plugin
  2、实现css和js分别打包： extract-text-webpack-plugin
• 安装项目上线后的依赖 ( --save)
  1、react
  2、react-dom
  3、react-router

搭建项目基础架构用webpack2

npm ini --y

配置webpack.config.js文件

const path = require('path');
const webpack = require('webpack');
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ExtractTextWebpackPlugin.extract({
                    fallback: 'style-loader',
                    publicPath: './dist',
                    use: 'css-loader'
                })
            }
        ]
    },
    plugins: [
        new ExtractTextWebpackPlugin('styles.css'),
        new HtmlWebPackPlugin({
            template: './src/index.html'
        })
    ]
};

更快捷的执行打包任务

• 添加"scripts":{}

{
  "name": "react-pro",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --progress --colors --port 3000 --inline",
    "build": "webpack -p"
  },
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-router": "^3.2.0"
  }

在终端输入指令 npm start 即可跑起来了。