React 创建项目的基础

如何创建一个react项目

npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

关于webpack的一些基本命令和配置

首先我们需要初始化项目,npm init生成package.json文件
利用webpack构建工具,安装相应插件,运行npm install webpack webpack-dev-server --save-dev
我们使用react,所以需要安装相应插件,npm i react reacr-dom --save
--save和--save-dev一个是在项目开发时需要的,一个是项目打包上线之后依然需要用到的,他们会放到不同依赖的里面
devDependencies 开发环境才需要用到的依赖,项目打包上线之后不需要
dependencies项目上线之后依旧需要使用的依赖

webpack.config.js

就是一个普通的js文件,遵从commonJS规则,最后输出一个对象,即module.export = { ... }

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');

输入/输出

一般新建./app/index.jsx作为入口文件

entry: path.resolve(__dirname, 'app/index.jsx'),

输出就是bundle.js,js和css都在里面,不过只有在开发环境中才会用到,发布代码的时候,肯定不会只有一个文件

 output: {
        filename: "bundle.js"
    },

resolve: 自动补偿后缀名

    resolve:{
        extensions:['', '.js','.jsx']
    },

module

针对不同类型的文件,使用不同的loader(加载器),当然使用之前需要安装

    module: {
        loaders: [
            { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel' },
            { test: /\.less$/, exclude: /node_modules/, loader: 'style!css!postcss!less' },
            { test: /\.css$/, exclude: /node_modules/, loader: 'style!css!postcss' },
            { test:/\.(png|gif|jpg|jpeg|bmp)$/i, loader:'url-loader?limit=5000' },  // 限制大小5kb
            { test:/\.(png|woff|woff2|svg|ttf|eot)($|\?)/i, loader:'url-loader?limit=5000'} // 限制大小小于5k
        ]
    },
    postcss: [
        require('autoprefixer') //调用autoprefixer插件，例如 display: flex
    ],

plugins插件

一般会用到一些插件

    plugins: [
        // html 模板插件
        new HtmlWebpackPlugin({
            template: __dirname + '/app/index.tmpl.html'
        }),

        // 热加载插件
        new webpack.HotModuleReplacementPlugin(),

        // 打开浏览器
        new OpenBrowserPlugin({
          url: 'http://localhost:8080'
        }),

        // 可在业务 js 代码中使用 __DEV__ 判断是否是dev模式（dev模式下可以提示错误、测试报告等, production模式不提示）
        new webpack.DefinePlugin({
          __DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false'))
        })
    ],

devServer

devServer: {
        colors: true, //终端中输出结果为彩色
        historyApiFallback: true, //不跳转，在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
        inline: true, //实时刷新
        hot: true  // 使用热加载插件 HotModuleReplacementPlugin
    }

npm start

"scripts": {
    "start": "NODE_ENV=dev webpack-dev-server --progress --colors",
    "build": "rm -rf ./build && NODE_ENV=production webpack --config ./webpack.production.config.js --progress --colors"
  },

其中,只有npm start 和 npm test可以省略run
执行npm start中的设置通过 new webpack.DefinePlugin来判断

webpack.production.config.js

开发环境下,可以不用考虑系统性能,更多的考虑如何增加开发效率,而发布之后需要考虑这方面,包括加载速度,缓存等等

发布到`./build`文件夹中

path: __dirname + "/build",

vendor

将第三方依赖单独打包,即将node_module文件夹的代码打包为vendor.js将我们自己写的业务打包为app.js,这样有助于缓存,因为在项目维护过程中,第三方依赖不经常变化,而业务代码会经常变化

 // 将 第三方依赖（node_modules中的） 单独打包
    vendor: Object.keys(pkg.dependencies)

md5后缀

为每个打包出来的文件都加md5后缀,可使文件强缓存
filename: "/js/[name].[chunkhash:8].js"

分目录

打包出来的不同类型的文件,放在不同目录下,例如图片,样式等