从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 115     }
  })
}

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 表示缩进是两个空格否则会报错, 其他用法可参考官网。