Webpack4.X搭建基于typescript的react工程并撸一套个人的脚手架（一）

已注销
427 阅读3分钟

说明：本文代码区域中的 “+”表示新增，“-”表示删除，“M”表示修改。

1.初始化项目

  • 新建一个项目

mkdir webpack-react-demo

  • 进入到新创建的项目目录下

cd webpack-react-demo

  • 初始化项目

npm init -y (或者npm init)

npm init会有命令询问，你可以根据自己的需要输入相应的内容，或者一路Enter执行下去。

  • 修改package.json文件

    • 删除入口："main":"index.js"
    • 添加私有选项，以确保安装包是私有的，防止意外发布代码："private":true
    {
      "name": "webpack-react-demo",
      "version": "1.0.0",
      "description": "",
-     "main": "index.js",
+     "private": true,
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "lzh",
      "license": "ISC"
    }

  • 安装webpack

    • -D（或--save-dev）：安装的包会记录在devDependencies（dev开发时的依赖包）下
    • --save：安装的包会记录在dependencies（程序运行时的依赖包）下
npm i webpack webpack-cli webpack-dev-server -D

2. 创建项目目录结构

|--- build                  // 存放webpack的配置文件
|--- src                    // 存放项目源代码
|------ components          // 存放公共组件
|------ pages               // 存放页面（为多页面做准备）
|--------- index            // 以页面名称命名
|------------ components    // 页面级组件
|------------ index.html    // 页面模板文件
|------------ index.js      // 入口文件

项目目录结构

3. webpack初始化配置

为了便于管理，我们在/build目录下分别新建三个配置文件：

a. webpack.common.js：公共配置（开发和生产环境共有的配置）;
b. webpack.dev.js：开发环境配置
c. webpack.prod.js：生产环境配置

这里需要借助webpack-merge(合并插件)进行拆分管理;

  • 安装webpack-merge
npm i webpack-merge -D
  • 配置webpack.common.js
const path = require('path');
const DIST_PATH = path.resolve(__dirname,'../dist');    //声明`/dist`路径

module.exports = {
    // 入口文件js路径
    entry : {
        index: path.resolve(__dirname,'../src/pages/index/index.js')
    },
    // 编译输出的js路径
    output: {
        path: DIST_PATH,    // 创建的编译文件生成到`/dist`
        filename: 'js/[name].js'   // js生成到`dist/js`，[name]表示保留原js文件名
    },
    // 模块解析
    module: {

    },
    // 插件
    plugins: [

    ]
};
  • 配置webpack.dev.js
const path = require('path');
const merge = require('webpack-merge');

const DIST_PATH = path.resolve(__dirname,'../dist');
const commonConfig = require('./webpack.common.js');

module.exports = merge(commonConfig, {
    mode: 'development',
    // 开发环境下需要的相关插件配置
    plugins: [

    ],
    // 开发服务器
    devServer: {
        hot: true,  // 热更新
        contentBase: DIST_PATH, // 告诉服务器从哪个目录中提供内容，只有在你需要提供静态文件时才需要
        historyApiFallback: true,   // 所有404都连接到index.html
        proxy: {
            '/api': 'http://localhost'
        }
    }
});
  • 配置webpack.prod.js
const merge = require('webpack-merge');

const commonConfig = require('./webpack.common.js');

module.exports = merge(commonConfig, {
    mode: 'production',
    plugins: [

    ]
});
  • 在package.json的scripts下修改终端命令：
    {
      "name": "webpack-react-demo",
      "version": "1.0.0",
      "description": "",
      "private": true,
      "scripts": {
+       "build": "webpack --config ./build/webpack.prod.js --mode production",
+       "dev": "webpack-dev-server --config ./build/webpack.dev.js --mode development --open",
-       "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "lzh",
      "license": "ISC",
      "devDependencies": {
        "webpack": "^4.39.1",
        "webpack-cli": "^3.3.6",
        "webpack-dev-server": "^3.7.2",
        "webpack-merge": "^4.2.1"
      }
    }

此时便可以在终端执行npm run build进行编译；npm run dev进行启动服务器运行

4. 安装插件

从HTML模板自动生成最终HTML（/dist目录下）: html-webpack-plugin；及webpack模板（能将元素id附加到mount）:html-webpack-template

  • 安装
npm i html-webpack-plugin html-webpack-template -D
  • 在webpack.common.js的plugins下添加配置：

minify的相关配置：会将打包生成的.js和.css文件引入到.html文件中时去除注释、空白等

//...
+   const HtmlWebpackPlugin = require('html-webpack-plugin');
+   const HtmlWebpackTemplate = require('html-webpack-template');
    
    module.exports = {
      //...
      //插件
      plugins: [
+        new HtmlWebpackPlugin({
+           inject: false, // 必需,把所有资产注入到给定的`template`
+           template: HtmlWebpackTemplate, // 必需
+           appMountId: 'root', // 模板文件中挂载元素的id名称
+           filename: 'index.html',  // 要将HTML写入的文件
+           minify: {
+               removeComments: true,   // 去掉注释
+               collapseWhitespace: true,   //去掉多余空白
+               removeAttributeQuotes: true //去掉一些属性的引号，例如：id="moo" => id=moo
+           }
+       })
      ]
    };

5. 对以上配置进行测试验证

5.1 在模板文件（/src/pages/index/index.html）中初始化模板页面

// index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack-react-demo</title>
</head>
<body>
    
</body>
</html>

5.2 在入口文件(/src/pages/index/index.js)中编写一些js代码输出：

// index.js

alert("hello webpack!");

5.3 执行npm run build编译

会在项目根目录下新创建/dist目录，并且在index.html中自动插入js文件及挂载元素id

编译后的目录机构

编译生成的index.html

5.4 执行npm run dev启动服务器运行

会弹出如下图所示内容。综上，目前的项目的基本配置成功！
接下来一节中会继续介绍插件及安装react、typescript的依赖。

运行结果

step1的源码:github.com/lizenghua/w…

欢迎添加本人微信一起交流学习。

微信

avatar
文章
阅读
粉丝