总结vue-cli中的webpack配置-- Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训

webpack简介

随着移动互联的浪潮到来，Webapp模式、SPA受到越来越多的关注。如何在开发环境中组织好碎片化、多格式的代码和资源，并保证他们在浏览器端快速、优雅地加载和更新需要一个模块化的系统。

Webpack就是这样的模块化系统。它有以下几个特点：

分块传输，按需进行懒加载；
各种格式的资源都是JavaScript模块，可以用require加载；
对代码进行静态分析，分析各模块的类型和依赖关系并交给适合的加载器处理。

具体地说，Webpack的配置主要包括这几个方面：

入口：指定我们代码的入口点。它的值是一个字符串或者一个对象（多个入口）。
加载器：因为Webpack本身只能处理JavaScript模块，如果要处理其他类型的文件，就需要使用 loader(加载器)进行转换。加载器将资源转换成JavaScript模块，在打包之前提供预处理。
插件：提供加载器无法做到的其他扩展功能。
出口：包括打包后的文件放置的路径及它们的文件名称。

vue-cli版本

2.8.1
（没有使用ESLint，没有安装单元测试，e2e测试）

package.json

1.{
2.    // ...
3.    "scripts": {
4.        // 开发环境
5.        "dev": "node build/dev-server.js",
6.        // 生产环境
7.        "build": "node build/build.js"
8.    },
9.    // ...
10.    "devDependencies": {
11.        // ...
12.        // 配置分离，将配置定义在config/下，然后合并成最终的配置，以避免webpack.config.js臃肿
13.        "webpack-merge": "^2.6.1"
14.    },
15.    // ...
16.}

基础配置

build/webpack.base.conf.js

dev-server.js里引入了webpack.dev.conf.js，build.js里引入了webpack.prod.conf.js，而这两个文件(webpack.dev.conf.js和webpack.prod.conf.js)里都引入了webpack.base.conf.js

1.var path = require('path')
2.var utils = require('./utils')
3.var config = require('../config')
4.var vueLoaderConfig = require('./vue-loader.conf')
5.function resolve (dir) {
6.  return path.join(__dirname, '..', dir)
7.}
8.module.exports = {
9.  // [[ 1. 配置webpack编译入口 ]]
10.  entry: {
11.    app: './src/main.js'
12.  },
13.  // [[ 2. 配置webpack输出路径和命名规则 ]]
14.  output: {
15.    path: config.build.assetsRoot,
16.    filename: '[name].js',
17.    publicPath: process.env.NODE_ENV === 'production'
18.      ? config.build.assetsPublicPath
19.      : config.dev.assetsPublicPath
20.  },
21.  // [[ 3. 配置模块resolve规则 ]]
22.  resolve: {
23.    extensions: ['.js', '.vue', '.json'],
24.    // 创建路径别名
25.    alias: {
26.      'vue$': 'vue/dist/vue.esm.js',
27.      '@': resolve('src')
28.    }
29.  },
30.  // [[ 4. 配置不同类型模块的处理规则 ]]
31.  module: {
32.    rules: [
33.      {
34.        test: /\.vue$/,
35.        loader: 'vue-loader',
36.        options: vueLoaderConfig
37.      },
38.      {
39.        test: /\.js$/,
40.        loader: 'babel-loader',
41.        include: [resolve('src'), resolve('test')]
42.      },
43.      {
44.        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
45.        loader: 'url-loader',
46.        options: {
47.          limit: 10000,
48.          name: utils.assetsPath('img/[name].[hash:7].[ext]')
49.        }
50.      },
51.      {
52.        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
53.        loader: 'url-loader',
54.        options: {
55.          limit: 10000,
56.          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
57.        }
58.      }
59.    ]
60.  }
61.}

开发环境

build/dev-server.js

执行npm run dev首先运行dev-server.js这个文件。

1.// [[ 1. 检查node和npm的版本 ]]
2.require('./check-versions')()
3.// [[ 2. 引入相关插件和配置 ]]
4.// 获取配置，获取配置中设置的环境变量
5.var config = require('../config')
6.if (!process.env.NODE_ENV) {
7.  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
8.}
9.var opn = require('opn') // 用于打开默认浏览器打开localhost:端口
10.var path = require('path')
11.var express = require('express')
12.var webpack = require('webpack')
13.var proxyMiddleware = require('http-proxy-middleware') // 一个express中间件，用于将http请求代理到其他服务器
14.var webpackConfig = require('./webpack.dev.conf')
15.// 设置监听端口
16.var port = process.env.PORT || config.dev.port
17.// 设置是否自动打开浏览器
18.var autoOpenBrowser = !!config.dev.autoOpenBrowser
19.// 定义HTTP代理表
20.// https://github.com/chimurai/http-proxy-middleware
21.var proxyTable = config.dev.proxyTable
22.// [[ 3. 创建express服务器和webpack编译器 ]]
23.var app = express()
24.var compiler = webpack(webpackConfig)
25.// [[ 4. 配置开发中间件和热重载中间件 ]]
26.var devMiddleware = require('webpack-dev-middleware')(compiler, {
27.  publicPath: webpackConfig.output.publicPath,
28.  quiet: true
29.})
30.var hotMiddleware = require('webpack-hot-middleware')(compiler, {
31.  log: () => {}
32.})
33.// 当html-webpack-plugin模版文件发生改变，强制页面重载
34.compiler.plugin('compilation', function (compilation) {
35.  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
36.    hotMiddleware.publish({ action: 'reload' })
37.    cb()
38.  })
39.})
40.// [[ 5. 挂载代理服务和中间件 ]]
41.Object.keys(proxyTable).forEach(function (context) {
42.  var options = proxyTable[context]
43.  if (typeof options === 'string') {
44.    options = { target: options }
45.  }
46.  app.use(proxyMiddleware(options.filter || context, options))
47.})
48.// 重定向不存在的URL
49.app.use(require('connect-history-api-fallback')())
50.// 使用开发中间件，即把webpack编译后输出到内存中的文件资源挂到express服务器上
51.app.use(devMiddleware)
52.// 挂载热重载
53.app.use(hotMiddleware)
54.// [[ 6. 配置静态资源 ]]
55.var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
56.app.use(staticPath, express.static('./static'))
57.// [[ 7. 启动服务器监听特定端口]]
58.var uri = 'http://localhost:' + port
59.var _resolve
60.var readyPromise = new Promise(resolve => {
61.  _resolve = resolve
62.})
63.// [[ 8. 打开默认浏览器打开localhost:端口 ]]
64.console.log('> Starting dev server...')
65.devMiddleware.waitUntilValid(() => {
66.  console.log('> Listening at ' + uri + '\n')
67.  // when env is testing, don't need open it
68.  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
69.    opn(uri)
70.  }
71.  _resolve()
72.})
73.// 监听端口
74.var server = app.listen(port)
75.module.exports = {
76.  ready: readyPromise,
77.  close: () => {
78.    server.close()
79.  }
80.}

其他配置文件

build/webpack.dev.conf.js：在webpack.base.conf的基础上完善了开发环境中需要的配置，如合并配置文件、更友好地输出webpack的警告信息等
build/utils.js：配置静态资源路径，pei z样式的加载器cssLoaders和styleLoaders
build/vue.loader.conf.js：配置了css加载器和编译css之后自动添加前缀(autoprefixer)

生产环境

build/build.js

执行npm run build首先运行build.js这个文件。

1.// [[ 1. 检查NodeJS和npm的版本 ]]
2.require('./check-versions')()
3.process.env.NODE_ENV = 'production'
4.var ora = require('ora') // 用于开启loading动画
5.var rm = require('rimraf')
6.var path = require('path')
7.var chalk = require('chalk')
8.var webpack = require('webpack')
9.var config = require('../config')
10.var webpackConfig = require('./webpack.prod.conf')
11.// [[ 2. 开启loading动画 ]]
12.var spinner = ora('building for production...')
13.spinner.start()
14.// [[ 3. 删除创建打包的目标文件夹]]
15.rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
16.  if (err) throw err
17.  // [[ 4. webpack编译 ]]
18.  webpack(webpackConfig, function (err, stats) {
19.    spinner.stop()
20.    if (err) throw err
21.    // 输出相关信息
22.    process.stdout.write(stats.toString({
23.      colors: true,
24.      modules: false,
25.      children: false,
26.      chunks: false,
27.      chunkModules: false
28.    }) + '\n\n')
29.    console.log(chalk.cyan('  Build complete.\n'))
30.    console.log(chalk.yellow(
31.      '  Tip: built files are meant to be served over an HTTP server.\n' +
32.      '  Opening index.html over file:// won\'t work.\n'
33.    ))
34.  })
35.})