如何在 Vue-cli 中配置 Webpack？

Posted 2023-02-23

【中文标题】如何在 Vue-cli 中配置 Webpack？

【英文标题】：How to configure Webpack within Vue-cli?

【发布时间】：2018-08-12 04:18:00

【问题描述】：

编辑：我停止尝试让它工作。

---

我正在使用 Vue-cli (https://github.com/chrisvfritz/vue-enterprise-boilerplate)，它在水下使用 Webpack 创建网站。

现在我想更改我的webpack.config.js，但此文件不存在。

vue.config.js 包含一个 configureWebpack 属性，但这似乎与普通的 Webpack 配置不同。

我要使用的 Webpack 配置是这样的：

// Webpack config
const webpack = require('webpack');
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const StartServerPlugin = require('start-server-webpack-plugin');

module.exports = 
    entry: ['webpack/hot/poll?1000', './src/index'],
    watch: true,
    target: 'node',
    node: 
        __filename: true,
        __dirname: true
    ,
    externals: [nodeExternals( whitelist: ['webpack/hot/poll?1000'] )],
    module: 
        rules: [
            ...
        ]
    ,
    plugins: [
        new StartServerPlugin('server.js'),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.DefinePlugin(
            'process.env':  BUILD_TARGET: JSON.stringify('server') 
        )
    ],
    output:  path: path.join(__dirname, 'dist'), filename: 'server.js' 
;

我不知道在我的vue.config.js 中放置在哪里，看起来像这样：

// Vue config
const appConfig = require('./src/app.config')

module.exports = 
  configureWebpack: 
    // We provide the app's title in Webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: appConfig.title,
    // Set up all the aliases we use in our app.
    resolve: 
      alias: require('./aliases.config').webpack,
    ,
    module: 
      rules: [
        
          test: /\.styl$/,
          use: [
            'style-loader',
            
              loader: 'css-loader',
              options: 
                modules: true,
                localIdentName: '[name]__[local]___[hash:base64:5]',
              ,
            ,
            'stylus-loader',
          ],
        ,
      ],
    ,
  ,
  css: 
    // Enable CSS source maps.
    sourceMap: true,
    // Enable CSS modules for all CSS/pre-processor files.
    // This option does not affect *.vue files.
    modules: true,
  ,
  // Split dependencies into their own bundle.
  // https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
  dll: true,
  // Configure Webpack's dev server.
  // https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md
  devServer: 
    ...(process.env.API_BASE_URL
      ? // Proxy API endpoints to the production base URL.
         proxy:  '/api':  target: process.env.API_BASE_URL   
      : // Proxy API endpoints a local mock API.
         before: require('./tests/mock-api') ),
  ,

到目前为止，我已尝试将 webpack.config.js 转换为 app.config.js，但现在 Vue-cli 抱怨未满足依赖关系。

These dependencies were not found:

* @components/_globals in ./src/main.js
* @router in ./src/main.js
...

【问题讨论】：

Vue/cli 3 还是很新的。看来webpack.config.js 的module.exports 中的对象应该直接粘贴到vue.config.js 的configureWebpack 属性中。你试过了吗？

也许你已经找到了这个链接，但它可能会有所帮助，因为这些文档是一个月前更新的：cli.vuejs.org/guide/webpack.html#simple-configuration

【参考方案1】：

Vue CLI 3.0.0 解决方案

在项目主目录中创建vue.config.js文件：

module.exports = 
  configureWebpack: 
    devServer: 
        watchOptions: 
          ignored: ['node_modules'],
          aggregateTimeout: 300,
          poll: 1500
        ,
        public: '192.168.56.132' // vagrant machine address
    
  

【讨论】：

正在使用 windows + vue cli 3 + wsl 2（在 windows 中编辑文件，在 wsl 中运行 yarn serve）并且没有什么是热重载...放置在 watchOptions 上方，现在 webpack devserver 正在启动变化。