菜鸟录（一）——TS+React环境0到1历程

前言

从实习开始，一直都是在做零零碎碎的东西，辗转于各种业务需求之间，从来没有从0到1跟过一个完整的项目，这就导致我所有学过的知识很零散，不具有连贯性和实操性。我意识到这样辗转于各种业务需求之间，并不会促进我自身的进步，更为危险的是这将浪费一个菜鸟最为宝贵的成长时机。既然没有机会，那我就自己创造机会。因此，有了TS+React环境搭建、npm包的发布、脚手架搭建这一系列从0到1的笔记。(这是一个一心想搞好技术的菜鸟的自我记录，不足之处，还望各位大佬多多提点)

从webpack入手 

安装webpack工具

npm i webpack webpack-cli --save-dev

使用版本：

 "webpack": "^4.41.2",
 "webpack-cli": "^3.3.10",

配置webpack

个人习惯将不同配置环境文件拆分开（具体配置见官网），遵循一步一测的原则。

1.先配置公共common文件

const path = require('path')
module.exports = {
    entry: {
        app: path.resolve(__dirname, '../../src/main.js'),
    },
    output: {
        filename: 'js/[name].[hash:8].js',
        path: path.resolve(__dirname, '../../dist'),
    },
}

 2.更改package.json文件

{
  "scripts": {
   "build": "webpack --config ./scripts/config/webpack.common.js",
  },
}

3.运行

npm run build

可以看到根目录下出现了dist文件夹。

区分开发和生产环境

为适应不同环境的需求，我们通过webpack-merge 来适配不同环境的webpack配置文件

npm install webpack-merge -D

接下来分别在webpack.dev.js和webpack.prod.js文件中配置如下：

// webpack.dev.js文件
const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')

module.exports = merge(common, {
    mode: 'development',
});


//webpack.prod.js文件
const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')

module.exports = merge(common, {
    mode: 'production',
})

考虑到不同操作系统设置环境变量的方式不一定相同，比如 Mac 电脑上使用 export NODE_ENV=development ，而 Windows 电脑上使用的是 set NODE_ENV=development ，因此使用cross-env这个工具来实现跨平台设置和使用环境变量。

npm install cross-env -D

接下来需更改package.json文件

 "scripts": {
    "start": "cross-env NODE_ENV=development webpack --config ./scripts/config/webpack.dev.js",
    "build": "cross-env NODE_ENV=production webpack --config ./scripts/config/webpack.prod.js"
  },

此时，运行两条命令皆可看到根目录下生成dist文件，说明目前配置是成功的。

本地服务实时查看页面

执行npm run start ，它直接起一个本地服务，然后页面就出来了。而现在执行这个命令却只能简单的打个包，此时，需借助 webpack-dev-server 和 html-webpack-plugin 实现，现在先把它们安装下来：

npm install webpack-dev-server html-webpack-plugin -D

 使用版本：

"html-webpack-plugin": "^4.5.1",
"webpack-dev-server": "^3.11.2",

工具作用：

• html-webpack-plugin ：每一个页面是一定要有 html 文件的，而这个插件能帮助我们将打包后的 js 文件自动引进 html 文件中，毕竟你不可能每次更改代码后都手动去引入 js 文件。
• webpack-dev-server ：可以在本地起一个 http 服务，通过简单的配置还可指定其端口、热更新的开启等。

因为 html-webpack-plugin 在开发和生产环境我们都需要配置，所以在 webpck.common.js 增加以下内容 ：

const HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports = {
    entry: {...},
    output: {...},
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(PROJECT_PATH, './public/index.html'),
            filename: 'index.html',
            cache: false, // 特别重要：防止之后使用v6版本 copy-webpack-plugin 时代码修改一刷新页面为空问题。
            minify: isDev ? false : {