从0开始搭建vue+webpack脚手架（四）

之前1-3部分是webpack最基本的配置， 接下来会把项目结构和配置文件重新设计，可以扩充更多的功能模块。

一、重构webpack的配置项

1. 新建目录build,存放webpack不同的配置文件

　　(1) webpack.config.base.js  【保留公共的配置项，将生产环境和开发环境使用的配置项分离出去】

 const path = require('path')
 const webpack = require('webpack')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const CleanWebpackPlugin = require('clean-webpack-plugin')

 const isDev = process.env.NODE_ENV === 'development'

 const config = {
　　  mode: process.env.NODE_ENV || 'production'
   target: 'web',
   performance: {
     hints: false,
     maxAssetSize: 500000
   },
   entry: path.join(__dirname, '../src/index.js'),
   output: {
     path: path.join(__dirname, '../dist'),
     filename: 'scripts/bundle.[hash:8].js'
   },
   module: {
     rules: [
       {
         test: /\.vue$/,
         use: [
           {
             loader: "vue-loader"
           }
         ]
       },
       {
         test: /\.jsx$/,
         loader: "babel-loader"
       },
       {
         test: /\.js$/,
         loader: "babel-loader",
         exclude: /node_modules/
       },
       {
         test: /\.(jpg|jpeg|gif|png|svg)$/,
         use: [
           {
             loader: "url-loader",
             options: {
               limit: 1024,
               name: 'images/[name]-[hash:8].[ext]'
             }
           }
         ]
       }
     ]
   },
   plugins: [
     new VueLoaderPlugin()
   ]
 }

 module.exports = config

注意： 入口文件和输出路径

注意： VueLoaderPlugin是使用vue-loader必须的，两种环境都需要加载。jsx和js的规则分开配置，因为js编译时需要除去node_modules目录下的文件。

　　(2) webpack.config.client.js 【配置开发和生产环境环境需要的选项】

　　　　安装 webpack-merge工具， 提供配置文件扩展方法。

 $ npm i -D webpack-merge

　   (3)  在webpack.config.client.js中使用merge对基础的配置baseConfig进行扩展。

 const path = require('path')
 const webpack = require('webpack')
 const merge = require('webpack-merge')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const CleanWebpackPlugin = require('clean-webpack-plugin')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const baseConfig = require('./webpack.config.base')

 const isDev = process.env.NODE_ENV === 'development'
 const basePlugin = [
   new VueLoaderPlugin(),
   new CleanWebpackPlugin(['../dist']),
   // 根据不同环境区分打包
   new webpack.DefinePlugin({
     'process.env': {
       NODE_ENV: isDev ? '"development"' : '"production"',
     }
   }),
   new HtmlWebpackPlugin({
     template: path.join(__dirname, '../index.html')
   })
 ]
 const devServer = {
   port: 9000,
   host: '0.0.0.0',
   overlay: {
     errors: true
   },
   historyApiFallback: true,
   hot: true,
 }

 let config

 if (isDev) {
   config = merge(baseConfig, {
     // mode: 'development',
     // devtool: '#cheap-module-eval-source-map',
     module: {
       rules: [
         {
           test: /\.css$/,
           use: ['style-loader', 'css-loader']
         },
         {
           test: /\.styl(us)?$/,
           use: [
             'style-loader',
             'css-loader',
             {
               loader: "postcss-loader",
               options: {
                 sourceMap: true
               }
             },
             'stylus-loader',
           ]
         },
       ]
     },
     devServer,
     plugins: basePlugin.concat([
       new webpack.HotModuleReplacementPlugin(),
       new webpack.SourceMapDevToolPlugin() // devtool
     ])
   })
 } else {
   config = merge(baseConfig, {
     // mode: 'production',
     entry: {
       app: path.join(__dirname, '../src/index.js'),
       vendor: ['vue']
     },
     output: {
       filename: 'scripts/[name].[chunkhash:8].js'
     },
     module: {
       rules: [
         {
           test: /\.css$/,
           use: ExtractTextPlugin.extract({
             fallback: 'style-loader',
             use: ['css-loader']
           })
         },
         {
           test: /\.styl(us)?$/,
           use: ExtractTextPlugin.extract({
             fallback: 'style-loader',
             use: [
               'css-loader',
               {
                 loader: "postcss-loader",
                 options: {
                   sourceMap: true
                 }
               },
               'stylus-loader',
             ]
           })
         },
       ]
     },
     plugins: basePlugin.concat([
       new ExtractTextPlugin('style.[hash:8].css'),
     ]),
     optimization: {
       splitChunks: {
         chunks: 'all'  // name: 'vendor'
       },
       runtimeChunk: true      }
   })
 }

 module.exports = config

注意红色部分的修改：

　　1 .引入merge工具 和 webpack.config.base.js

　　2 .将公共plugin提取保存在变量 basePlugin, 不在base.js中使用的原因是后续的服务端渲染时无需使用， 故只在生产环境和开发环境引用。

　　3. 将devServer提取保存在变量中。

　　4. 声明变量config, 保存通过merge以baseConfig为基础扩展的配置项

　　5. basePlugin.concat()将公共的plugin添加到不同环境

修改package.json的运行脚本

 "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.client.js --colors --progress",
     "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js --colors --progress",
     "start": "npm run dev"
 },

注意， 指向指定路劲时必须使用 --config否则报错无法编译。之前不用--config是因为默认指向了根目录的webpack.config.js

至此： 运行 $ npm run build $ npm run dev正常。

另注： 如果后续需要编写服务端的代码，可以将项目分为client/ 和 server/ 两个目录，分别存放服务端和客户端的业务代码, 如下

将原来的src/改成client/ 注意别忘了修改 webpack.config.base.js和 webpack.config.client.js内的相关路径。目录修改根据自己的习惯和环境而定。

二、使用rimraf工具 ，在打包前删除旧包

　　1. 之前使用的是clean-webpack-plugin，rimraf也有同样的功能，但rimraf可以直接写在scripts脚本内

　　2. 安装 $ npm i -D rimraf

　　3 . 添加到 scripts中

 "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "npm run clean && cross-env NODE_ENV=production webpack --config build/webpack.config.client.js --colors --progress",
     "dev": "npm run clean && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js --colors --progress",
     "start": "npm run clean && npm run dev",
     "clean": "rimraf dist"
 },

三、添加eslint代码校验

　　（1）安装eslint及其依赖

npm i -D eslint
npm i -D eslint-config-standard eslint-plugin-standard
npm i -D eslint-plugin-promise eslint-plugin-import eslint-plugin-node
npm i -D eslint-plugin-html

　　特别要说明的是，在vue项目中，eslint默认是无法解析.vue的文件， 所以需要使用 eslint-plugin-html插件来解析　, 其他都是辅助eslint的插件和工具　

（2）创建 .eslinrc配置文件

{
  "extends": "standard",
  "plugins": [
    "html"
  ]
}

（3）package.json中添加命令

 "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "npm run clean && cross-env NODE_ENV=production webpack --config build/webpack.config.client.js --colors --progress",
     "dev": "npm run clean && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js --colors --progress",
     "lint": "eslint --ext .js --ext .jsx --ext .vue client/",
     "fix": "eslint --fix --ext .js --ext .jsx --ext .vue client/",
     "start": "npm run clean && npm run dev",
     "clean": "rimraf dist"
 },

配置完成后运行脚本 ： $ npm run lint会提示出一系列的警告。这是因为之前编写的代码中有些不符合eslint的默认规范。 可以使用 $ npm run  fix命令批量修复。

　　（4）错误

　　在新版本的eslint中，如果设置extends为 'standard'则会报错：（不再支持"standard"的方式, 具体原因暂时未知）,将eslinrc修改如下

 module.exports = {
   "env": {
     "browser": true,
     "commonjs": true,
     "es6": true
   },
   "extends": ["eslint:recommended"],
   "plugins": [
     "html"
   ]
 }

运行 $ npm run lint 但又出现错误：都不能使用export和 import， 继续添加配置

 "parserOptions": {
     "ecmaFeatures": {
       "jsx": true
     },
     "ecmaVersion": 2015,
     "sourceType": "module"
 },

此时运行 $ npm run lint不再报错。

以上是使用 eslint-plugin-html 解析vue文件 ， 也可以使用插件 eslint-plugin-vue来解析vue 文件，安装插件后修改eslintrc

 "extends": ["eslint:recommended", "plugin:vue/essential"],
   "plugins": [
     "vue"
  ],

运行 $ npm run lint检查错误， 运行 $ npm run fix修正错误。

　　（5）在webpack项目中使用eslint-loader

　　　安装

 $ npm i -D eslint-loader
 $ npm i -D babel-eslint

　　　　eslintrc的 parserOptions 中添加 babel-eslint

 "parserOptions": {
     "parser": "babel-eslint",   // 解析检测babel的代码
     "ecmaFeatures": {　　　　
       "jsx": true　　　　　　　　　　// 检测jsx语法
     },　　
     "ecmaVersion": 2015,
     "sourceType": "module"　
  },

　　　　在 webpack.config.base.js中 rules 添加 eslint 规则

 {
    test: /\.(vue|js|jsx)$/,
    exclude: /node_modules/,
    loader: "eslint-loader",
    enforce: "pre"   // 预处理，在匹配的文件编译前先检测语法
 },

至此， 运行项目, 并在业务文件内改成有错误的格式， eslint将会自动检测到后提示错误， 只要再修改回来即可正常。

接下来在 eslintrc文件中配置 rules，设置指定的语法格式。这里只配置了一小部分，根据项目需求可自定义。

"rules": {
    "no-new": "off",
    "no-alert": "off",
    "no-console": [
      "off"
    ],
    "eol-last": 0,
    "space-before-function-paren": 0,
    "indent": 0
  }

0 或者 off一般表示关闭不做解析。如以上代码中"indent" :0表示不做缩进的检测， "indent": 2 表示缩进是两个空格否则会报错, 其他用法可参考官网。