自定义vue-cli生成项目模板配置（1）

最近在读《变量》，目前得到的认知之一：慢变量才是决定事物长期发展的因素。

打算自定义vue-cli的脚手架或者根据自己的需要设置项目模板的相关参数，很大程度与慢变量这个概念相关。

当然，我还有一个想法或者认知：我的技术方向不是成为技术大神，而是成为快速开发app的高手，准确的说是高效开发App的高手，这里的App首先是WebApp。

要想实现这个目标需要有属于自己开发习惯和开发需求的脚手架配置。那么自定义脚手架势在必行。

下面介绍一下，对vue-cli生成的项目模板做了哪些修改。

1，将项目模板自带的style样式生成函数替换，换成具体需要的，也就是webpack.dev.conf.js文件里面

module: {
      rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },

　替换为具体项目采用的，因为经常使用scss所以换成下面配置

module: {
    rules: [{
        "test": /\.css$/,
        "use": ["vue-style-loader", {
          "loader": "css-loader",
          "options": {
            "sourceMap": true
          }
        }, {
          "loader": "postcss-loader",
          "options": {
            "sourceMap": true
          }
        }]
      },
      {
        "test": /\.scss$/,
        "use": ["vue-style-loader", {
          "loader": "css-loader",
          "options": {
            "sourceMap": true
          }
        }, {
          "loader": "postcss-loader",
          "options": {
            "sourceMap": true
          }
        }, {
          "loader": "sass-loader",
          "options": {
            "sourceMap": true
          }
        }]
      }
    ]
  }

　webpack.prod.conf.js文件里面原来的配置

module: {
  rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true,
      usePostCSS: true
  })
}

新配置

module: {
    rules: [{
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: 'vue-style-loader',
        use: [{
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      })
    }, {
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: 'vue-style-loader',
        use: [{
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      })
    }]
  }

然后项目模板来面的utils.js相关的styleLoaders、exports.cssLoaders生成函数就不需要了。

2，第二步增加了webpack.dll.conf.js文件，配置如下，目的是提前打包，加快项目build速度

const path = require('path');
const webpack = require('webpack');
function resolve (dir) {
  return path.join(__dirname, '..', dir)
}
module.exports = {
  entry: {
    vendor: [
       'vue', 'vue-router'
      ]
  },
  output: {
    path: path.join(__dirname, '../static/'),
    filename: '[name].dll.js',
    library: '[name]_library'
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '../static/', '[name]-manifest.json'),
      name: '[name]_library'
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      sourceMap: true
    })
  ]
}

使用dll插件需要在webpack.base.conf.js文件引入相关的配置

 plugins: [
    new webpack.DllReferencePlugin({
      manifest: require('../static/vendor-manifest.json')
    })
  ]

3，修改build中的devtool配置

// https://webpack.js.org/configuration/devtool/#development 
原配置项目
devtool: '#cheap-module-eval-source-map',
修改为
devtool: '#cheap-eval-source-map',

　　

待续……

到了cli3就不用dll了，因为性能已经很好了。