从零开始一个前端脚手架(四)

[keep-run]

我们的cli工具现在虽然可以使用了，但是还是很简陋，这一节主要从以下两个方面去丰富其功能：

• 打包css
• 代理

css打包

css打包有两种形式，第一是借助style-loader.配置如下：

  {
    test: /\.css$/,
    exclude: /node_modules/,
    use: [require.resolve('style-loader'), require.resolve('css-loader')],
  },

这样会把css打包进js文件，最后以style标签的形式把css样式渲染在html中。这种方式在生产环境会产生一些问题：

• 单个文件太大，影响加载；
• 大量的css代码存在于html中，不利于排查问题以及样式覆盖；

第二种形式是借助插件MiniCssExtractPlugin。 把样式单独抽离出来打包成一个文件。在html中通过一个link标签引入即可，这也是当下主流的使用方式，配置如下：
配置loader:

  import MiniCssExtractPlugin from 'mini-css-extract-plugin'
  ...
  {
    test: /\.css$/,
    exclude: /node_modules/,
    use: [MiniCssExtractPlugin.loader, require.resolve('css-loader')],
  },

配置plugin(src/babel/plugins)

export default (config) => {
  return [
    ...
    new MiniCssExtractPlugin({
      filename: config.mode === 'development' ? 'bundle.css' : 'bundle.[contenthash].css'     //输出css文件名称,  开发环境，文件名不要带hash,带hash会做持久缓存，影响开发热更。  生产环境需要带hash，用于做缓存
    }),
  ]
}

这里有一个坑啊。 开发环境的css文件名不要带hash值。webpack官网有一个一句话的解释：

使用 filename: "[contenthash].css" 启动长期缓存。根据需要添加 [name]。

这导致一个什么问题呢，如果开发环境文件名称带了hash值，当我们修改css文件时，页面不会热更，所以这里文件名称会加入当前模式的判断。

代理

对于一个成熟的脚手架工具，开发过程中mock数据是一项基本且重要的操作。当然实现mock的方法有很多，比如常用的charles等。我们这里提供一个方法，代理到本地目录。省去各种配置。

基本原理是：devServer中拦截ajax请求，去本地读取某个文件作为接口返回。
commanders/strat.js中增加配置：

...
const { port, cwd, mock } = config  
...

{
  ...
    onBeforeSetupMiddleware: function (devServer) {
      if (devServer) {
        devServer.app.use((req, res, next) => {
          // 对于ajax请求，可以设置mock
          if (mock && req.headers['x-requested-with']) {  //请求头中增加 x-requested-with  早期ajax请求会自动加， 新的fetch没有了，需要手动加
            const filePath = path.join(cwd, `/mock/${req._parsedUrl.path}.json`)
            let mockData = {}
            try {
              mockData = require(filePath)
            } catch (err) {
              mockData = { message: `${filePath} is not a file` }
            }
            res.set('Content-Type', 'application/json')
            res.send(mockData)
          }
          next()
        })
      }
    }
}

几点解释：

• mock字段作为配置，允许用户自定义。和其他配置字段一样在package.json中simple_cli字段下。
• 发送请求的请求头中必须有x-requested-with字段，以此作为识别ajax请求的标识。
• mock地址。在本地mock文件夹下。 比如请求路径为/test。则会读取本地目录：mock/test.json的值作为返回。

更多内容持续丰富中。

• 源码地址

相关文章：

• 从零开始一个前端脚手架(一)
• 从零开始一个前端脚手架(二)
• 从零开始一个前端脚手架(三)

[keep-run]

update