Vue 项目 webpack 配置详解-JavaScript中文网-JavaScript教程资源分享门户

在 Vue 项目中，webpack 是一个非常重要的工具，它可以将多个 JavaScript 文件打包成一个文件，并允许您在开发过程中使用 ES6 和其他未来的 JavaScript 特性。本文将介绍如何配置 webpack，以构建一个优化的 Vue 项目。

安装webpack

当您开始一个新的 Vue 项目时，webpack 是一个默认的构建工具。如果您使用的是 Vue CLI，webpack 将安装在您的项目中，否则您需要手动安装 webpack。

npm install --save-dev webpack

配置webpack

webpack 的配置文件为 webpack.config.js。以下是一个非常简单的 webpack 配置文件：

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  }
}

在这个配置文件中，entry 属性指定 webpack 的输入文件，output 属性指定 webpack 的输出文件。

加载器和插件

在 webpack 中，有两种重要的概念：加载器和插件。

加载器允许您在打包过程中转换文件。例如，您可以使用 Babel 这个加载器来将 ES6 转换成 ES5。

插件允许您在打包过程中修改输出结果。例如，您可以使用 UglifyJSPlugin 这个插件来压缩输出文件。

以下是一些常用的加载器和插件：

加载器：
- babel-loader：将 ES6 转换成 ES5
- css-loader：将 CSS 转换成 JavaScript，以便在 browserify 或 webpack 中使用
- style-loader：将 CSS 注入到 DOM 中
- vue-loader：处理 Vue 单文件组件
插件：
- UglifyJSPlugin：压缩输出文件
- DedupePlugin：消除重复的代码
- CommonsChunkPlugin：将多个入口文件中共同的代码提取到一个公共文件中

以下是一个基本的 webpack 配置文件：

// javascriptcn.com 代码示例
var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [path.join(__dirname, 'src')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': 'vue-style-loader!css-loader!sass-loader',
            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve('src')
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

在这个配置文件中，我们使用了一个多入口文件的配置方式。为了将相同的模块提取到一个单独的文件中，我们使用了 CommonsChunkPlugin。为了压缩输出，我们使用了 UglifyJSPlugin。我们还对 ES6 和 Vue 进行了处理，并使用了带有 eslint-loader 的 eslint 来检查我们的代码。

总结

在本文中，我们了解了如何配置 webpack 来优化 Vue 项目。我们介绍了如何使用加载器和插件来转换和优化代码，并提供了一个完整的示例来演示这些概念。现在，您可以开始使用 webpack 来管理您的 Vue 项目，并利用其强大的功能来提高您的开发效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653e35a37d4982a6eb7c52c8