vue+webpack环境构建及依赖插件

| |

前言

基于vue-cli3搭建基础的项目架构，针对不同的环境进行构建配置：本地环境，测试环境，线上环境。下面是对不同环境的一些配置和依赖工具的说明。

本地环境

命令

1
2
3
4
// vue-cli升级到2.9.1后，webpack升级到3.6.0，改成使用webpack.dev.conf.js配置
// node build/dev-server.js
cnpm run dev
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

配置

  • webpack-dev-server

    • hot 开启热更新
    • proxyTable 配置接口地址代理，解决接口跨域问题

  • webpack.dev.conf.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// webpack服务器配置
  devServer: {
    clientLogLevel: 'warning', // 消息类型 none error warning info
    historyApiFallback: { // 404响应，替代为index.hmtl
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true, // 热更新开启
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true // 启用gzip压缩
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser, // true 是否自动打开浏览器
    overlay: config.dev.errorOverlay // true 编译错误是是否全屏覆盖
    publicPath: config.dev.assetsPublicPath, // '/'
    proxy: config.dev.proxyTable, // 接口请求代理到后端服务器地址
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: { // 获取文件更新通知
      poll: config.dev.poll, // false 是否使用轮询 
    }
  },
  • config/index.js
1
2
3
4
5
6
7
// 'http://localhost:8080/auth' ==> 'http://localhost:8889/auth'
proxyTable: {
    '/auth':{
        target: 'http://localhost:8889', // 目标接口域名
        changeOrigin: true // 是否跨域
     },
}

测试环境

命令

1
2
cnpm run build_test
node build/build-test.js

配置

  • config/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'), // 输出目录
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    /**
     * Source Maps
     */
    productionSourceMap: false,
    devtool: '#source-map',
    cssSourceMap: true,
    // 压缩
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report,
  }

正式环境

命令

1
2
cnpm run build
node build/build.js

配置

  • config/index.js map选项设置为false
1
2
3
productionSourceMap: false,
devtool: '#source-map',
cssSourceMap: false,

koa后端

1
2
3
4
cnpm run server
node app.js
cnpm run server_watch // 监听文件更新，自动重启应用
nodemon app.js

通用工具

check-versions

  • 检测node和npm版本

  • 版本配置，package.json

    1
    2
    3
    4
    5
    6
    {
        "engines": {
            "node": ">= 7.6.0",
            "npm": ">= 3.0.0"
         }
     }

  • 依赖模块

    • chalk 控制台高亮
    • semver 判断版本号
    • shelljs 执行Unix命令
    • child_process 新建子进程，执行命令

环境参数配置

  • 依赖模块
    • webpack-merge拆分与合并配置对象
    • webpack.DefinePlugin({‘process.env’: config.build.env}) 设置环境参数
    • devtool 开发工具配置，代码调试定位，”cheap-module-eval-source-map” 调试工具
    • compression-webpack-plugin 正式环境压缩

浏览器兼容性

  • 浏览器兼容性版本配置

    1
    2
    3
    4
    5
    6
    7
    {
        "browserslist": [
            "> 1%",
            "last 2 versions",
            "not ie <= 8"
          ]
      }

  • 依赖模块

    • Babel/preset-env 兼容js特性
    • postcss 添加浏览器前缀
    • postcss-loader，配合使用Autoprefixer css浏览器前缀

html和静态资源

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 生成html文件，并注入资源链接
new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  favicon: path.join(__dirname, '../', 'src/assets/favicon.ico'),
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
  },
  chunksSortMode: 'dependency'
}),
// 复制静态资源文件
new CopyWebpackPlugin([
  {
    from: path.resolve(__dirname, '../static'),
    to: config.build.assetsSubDirectory,
    ignore: ['.*']
  }
])
  • 依赖模块
    • html-webpack-plugin 生成html，注入资源链接
    • copy-webpack-plugin 文件复制到构建目录，通常是static下的库文件，对应配置项 assetsSubDirectory: 'static'
    • url-loader 将小的静态资源文件转化为base64，减少http请求数量

css

1
2
3
4
5
6
7
8
9
10
// 分离css文件
new ExtractTextPlugin({
  filename: utils.assetsPath('css/[name].[contenthash].css')
}),
// 压缩css文件
new OptimizeCSSPlugin({
  cssProcessorOptions: config.build.productionSourceMap
    ? { safe: true, map: { inline: false } }
    : { safe: true }
}),
  • 依赖模块
    • vue-loader
    • css-loader
    • extract-text-webpack-plugin 分离css文件
    • optimize-css-assets-webpack-plugin 压缩css文件
    • vue-style-loader
    • less 预处理器
    • less-loader

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 压缩js文件
new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false
  },
  sourceMap: false
}),
// 提取公共代码，公共模块打包到vendor
new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks: function (module, count) {
    // any required modules inside node_modules are extracted to vendor
    return (
      module.resource &&
      /\.js$/.test(module.resource) &&
      module.resource.indexOf(
        path.join(__dirname, '../node_modules')
      ) === 0
    )
  }
}),
// 提取公共代码，将业务代码打包到manifest
new webpack.optimize.CommonsChunkPlugin({
  name: 'manifest',
  chunks: ['vendor']
}),

依赖模块

  • webpack.optimize.UglifyJsPlugin
  • webpack.optimize.CommonsChunkPlugin

vue-loader