React - Webpack 项目脚手架搭建

把手还是伸向了前端，抽空折腾了几天，算是理清了起步门槛。

一、首先确保安装了 npm，如果没装…那就想办法装上

$ npm
Usage: npm <command>

where <command> is one of:
    access, adduser, bin, bugs, c, cache, completion, config,
    ddp, dedupe, deprecate, dist-tag, docs, doctor, edit,
    explore, get, help, help-search, i, init, install,
    install-test, it, link, list, ln, login, logout, ls,
    outdated, owner, pack, ping, prefix, profile, prune,
    publish, rb, rebuild, repo, restart, root, run, run-script,
    s, se, search, set, shrinkwrap, star, stars, start, stop, t,
    team, test, token, tst, un, uninstall, unpublish, unstar,
    up, update, v, version, view, whoami

npm <command> -h     quick help on <command>
npm -l           display full usage info
npm help <term>  search for help on <term>
npm help npm     involved overview

Specify configs in the ini-formatted file:
    /Users/xiaoyu/.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config

npm@5.6.0 /usr/local/lib/node_modules/npm

二、安装 create-react-app。如果用 WebStorm，可以跳过这一步。

IDE 可以选择创建 React App，省去了手动执行，所以创建后的目录内容是一样的。

// -g : global
$ npm install create-react-app -g
/usr/local/bin/create-react-app -> /usr/local/lib/node_modules/create-react-app/index.js
+ create-react-app@3.2.0
added 91 packages in 24.685s

$ create-react-app
Please specify the project directory:
  create-react-app <project-directory>

For example:
  create-react-app my-react-app

Run create-react-app --help to see all options.

如介绍所言，创建一个app，名字任意，合法即可

$ create-react-app my-react-app

项目结构如下：

$ ls my-react-app
README.md		    package-lock.json	public
node_modules		package.json		src

• README.md : 你懂的
• node_moudles : 依赖都在找个目录下
• package.json : npm的配置文件，或者说是项目的配置文件
• package-lock.json : 锁定版本号
• public : 存放静态资源
• src : 代码／资源

三、安装 webpack 全家桶

npm install 参数说明：package.json 有几个依赖节点，dependencies 、 devDependencies 和 optionalDependencies，前者会随着项目发布出去；后者顾名思义，只在开发时使用；后后者为可选阶段

---

-S， --save ：依赖添加到 dependencies 节点，
-D，–save-dev ：依赖添加到 devDependencies 节点
-O，–save-optional ：依赖添加到 optionalDependencies 节点

以下命令，在项目根目录下执行

// 也可以放在一行执行
$ npm install webpack -D
$ npm install webpack-cli -D
$ npm install webpack-dev-server -D

注意，这里有个坑：这三个依赖的版本号一定要相互匹配，如果你要指定版本，一定要确认指定的版本号是行不通的，不然就会报错。都用最新版，目前一切正常。

四、配置 webpack server

鉴于 webpack 可用于本地 server，也可用于打包，各自使用不同的配置文件。在项目根目录创建个文件夹 wepack，用于存放 webpack 配置文件。

1. webpack/webpack.config.js，用于开发 server

const path = require('path');
const webpack = require('webpack');
const __repo = path.dirname(__dirname);
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: { // 程序唯一入口
        'index': path.resolve(__repo, 'src/index.jsx'),
    },
    mode: 'development',
    output: { // 打包文件输出位置
        path: path.resolve(__repo, "build"),
        filename: "bundle.js",
        publicPath: "/"
    },
    devServer: {
        contentBase: [path.join(__repo, 'public'),], // 本地服务器索价在的页面所在目录
        compress: false,
        port: 7788, // server 使用端口
        disableHostCheck: true,
        inline: true, // 实时刷新
        historyApiFallback: true, // 不跳转
        hot: true
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/, // 匹配所护理文件的扩展名正则表达式
                exclude: /(node_modules|bower_components)/, // 手动添加／屏蔽的文件
                use: {
                    loader: 'babel-loader', // loader名称
                }
            },
            {
                test: /\.(css|styl)$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    }
                 ]
            },
            {
                test: /\.html$/,
                use: [
                    {loader: 'html-loader'}
                ]
            },
            {
                test: /\.(gif|jpg|png|svg|ttf|eot|woff|woff2)$/,
                use : {
                    loader: 'file-loader?name=fonts/[name].[ext]'
                }
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'public/index.html'
        })
    ]
};

其中的 module，就是 webpack 的 loader，都是用来打包用的：

• babel-loader：打包jsx、js文件，转化成浏览器认识的格式，因该loader配置选项较多，一般单抽取出独立的文件.bebelrc，放在项目根目录，webpack可以自动识别到
• css-loader，style-loader：打包css、style文件
• html-loader：打包html文件
• file-loader：打包其他格式文件，如配置中所写

.babelrc 内容如下：

{
  "presets": ["@babel/preset-react", "@babel/preset-env"], // 支持的编码
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

其中，所有的loader、plugin，都需要手动安装

$ npm install -D babel-core babel-loader css-loader style-loader html-loader file-loader

$ npm install -D @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime html-webpack-plugin

2. 配置 package.json，使用webpack/webpack.config.js。修改 package.json 中的scripts 节点，如下：

"dev": "webpack-dev-server --config webpack/webpack.config.js"

此时，在项目根目录下执行该命令，即可。

$ npm run dev

五、配置 webpack 打包配置

和 server 类似，这里直接贴上配置文件

1. webpack/webpack.config.build.js

const path = require('path');
const webpack = require('webpack');
const __repo = path.dirname(__dirname);
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: "production",
    entry: path.resolve(__repo, 'src/index.jsx'),
    devtool: "#source-map",
    output: {
        path: path.resolve(__repo, "dist"),
        filename: "app/[name].bundle.js",
        publicPath: "/"
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/, // 匹配所护理文件的扩展名正则表达式
                exclude: /(node_modules|bower_components)/, // 手动添加／屏蔽的文件
                use: {
                    loader: 'babel-loader', // loader名称
                }
            },
            {
                test: /\.(css|styl)$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    }
                ]
            },
            {
                test: /\.html$/,
                use: [
                    {loader: 'html-loader'}
                ]
            },
            {
                test: /\.(gif|jpg|png|svg|ttf|eot|woff|woff2)$/,
                use : {
                    loader: 'file-loader?name=fonts/[name].[ext]'
                }
            },
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'public/index.html'
        })
    ]
};

2. 修改package.json中的scripts节点，如下

"build": "webpack --config webpack/webpack.config.build.js"

执行打包命令后，所有文件会输出到项目根目录下的dist中。

$ npm run build

打包后的文件，配合nginx就可以访问请求了。

（完）