自定義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了，因為性能已經很好了。