Webpack-bsv-极简React项目脚手架

芹泽_多摩雄
465 阅读3分钟

前言

一直以来做的react项目都是自己配置webpack的，之前每次新项目都是copy一下上一个项目的配置文件，npm i后就能愉快地跑起来了。copy多了也就想写一个npm包，以后直接npm i这个包就可以愉快地玩耍了，还可以让公司其他小伙伴们用，何乐不为呢。

1.功能

虽然说这是一个极简单的包，但是一些必要的功能能还是要必备的。

1.开发环境：  
  A.热替换(Hot Module Replacement 或 HMR)  
  B.错误定位到源代码的某一行 
  C.文件省略后缀  
  D.接口反向代理，跨域是不存在的。
2.生产环境：  
  A.代码分割  
  B.Split CSS  
  C.缓存-contenthash  
  D.CDN路径

2. 使用

"scripts": {
    "start": "bsv",
    "build": "bsv build"
  },

3.文件结构

+-- bin
|   +-- bsv.js（启动命令）
+-- config
|   +-- index.js（webpack配置文件）
+-- lib
|   +-- cli.js（读取不同的启动文件）
+-- public
|   +-- index.html（模板html）
+-- scripts
|   +-- start.js（开发模式）
|   +-- build.js（生产模式）
+-- utils
|   +-- bsv.js（读取用户配置）

4.依赖项

    "@babel/core": "^7.9.0",
    "@babel/plugin-transform-runtime": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "@babel/preset-react": "^7.9.4",
    "@babel/runtime": "^7.9.6",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "cross-env": "^7.0.2",
    "css-loader": "^3.5.3",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.2.0",
    "ip": "^1.1.5",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "style-loader": "^1.2.0",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3",
    "webpack-merge": "^4.2.2"

5.Webpack配置文件

看标题就知道这是一个极度简单的webpack配置，所以我这里的配置代码刚好100行左右。但是可以支持日常开发需求。

这里主要来看一下module部分。

{
        test: /\.(js|jsx)$/,
        exclude: [
          path.resolve(`${process.cwd()}/node_modules`)
        ],
        use: {
          loader: 'babel-loader',
          options: {
            sourceType: 'unambiguous',
            presets: [
              '@babel/preset-env',
              '@babel/preset-react'
            ],
            plugins: [
              '@babel/plugin-transform-runtime' // babel-profiyy按需加载
            ]
          }
        }
      },
      {
        test: /\.(css|styl)$/,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: ['css-loader', 'stylus-loader']
        })
      },
      {
        test: /\.(png|jpg|svg|gif)$/,
        use: ['file-loader']
      }

注意上面的@babel/plugin-transform-runtime这个插件，依赖里面并没有有@babel/runtime这个包，但是@babel/plugin-transform-runtime这个插件包里面会自动引用@babel/runtime这个包。

6.启动文件

之前一直在命令行里面执行webpack，这一次需要在文件中执行webpack。

开发环境

var webpackDevServer = require('webpack-dev-server')
var webpack = require('webpack')
var devConf = require('../config/index.js')
var options = devConf.devServer

webpackDevServer.addDevServerEntrypoints(devConf, options)
var compiler = webpack(devConf)
var start = new webpackDevServer(compiler, options)

start.listen(options.port, options.host)

生成环境


var webpack = require('webpack')
var prodConf = require('../config/index.js')

webpack(prodConf, (err, stats) => {
  if (err || stats.hasErrors()) {
    return
  }
  process.stdout.write(stats.toString({
    colors: true,
    displayChunks: true,
    hash: false,
    source: true,
    modules: false,
    children: false,
    chunks: true,
    progress: true,
    chunkModules: false
  }) + '\r\n')

  console.log('build success!')
})

7.本地调试

任何一个npm包写好以后都需要在本地先进行调试，这里可以使用npm link 命令。 用来在本地项目和本地npm模块之间建立连接，可以在本地进行模块测试

具体用法：

  1. 项目和模块在同一个目录下，可以使用相对路径
    npm link ../module

  2. 项目和模块不在同一个目录下
    cd到模块目录，npm link，进行全局link
    cd到项目目录，npm link 模块名(package.json中的name)

  3. 解除link
    解除项目和模块link，项目目录下，npm unlink 模块名
    解除模块全局link，模块目录下，npm unlink 模块名

8.最后

Webpack-bsv已上传npm，地址如下
Webpack-bsv
详细个性化配置请参考对应的README，谢谢。

avatar
文章
阅读
粉丝