請(qǐng)問(wèn)如何在webpack生產(chǎn)環(huán)境配置中引入基礎(chǔ) webpack 配置

基本情況

首先，我是想將 webpack 一個(gè)配置文件分成多個(gè)配置文件（基本配置 webpack.config.js、生產(chǎn)環(huán)境配置 webpack.prod.config.js 及開(kāi)發(fā)環(huán)境配置 webpack.dev.config.js），但是我所遇到的問(wèn)題是在分離出來(lái)的生產(chǎn)環(huán)境配置中，啟動(dòng)打包時(shí)，無(wú)法正確解析 loader，報(bào)錯(cuò)信息如下：

ERROR in ./src/index.js
Module not found: Error: Can't resolve './App' in 'D:\git\visual-todos\src'
 @ ./src/index.js 2:0-23 8:16-19 9:17-20

ERROR in ./src/router/index.js
Module not found: Error: Can't resolve '@/components/Layout' in 'D:\git\visual-todos\src\router'
 @ ./src/router/index.js 3:0-40 12:17-23
 @ ./src/index.js

在將生產(chǎn)環(huán)境配置放回基本配置中，即基本配置和生產(chǎn)環(huán)境配置在同一文件夾時(shí)就能正常解析并打包。

若在報(bào)錯(cuò)的代碼行，手動(dòng)添加后綴名 .vue，仍報(bào)錯(cuò):

ERROR in ./src/router/index.js
Module not found: Error: Can't resolve '@/components/Layout.vue' in 'D:\git\visual-todos\src\router'
 @ ./src/router/index.js 3:0-44 12:17-23
 @ ./src/index.js

補(bǔ)充說(shuō)明：

配置結(jié)構(gòu)如下：

visual-todos
     ├──build
     |     ├── webpack.config.js
     |     ├── webpack.dev.config.js
     |     └── webpack.prod.config.js

生產(chǎn)環(huán)境代碼如下

const webpack = require('webpack')
const path = require('path')
const baseWebpackConfig = require('./webpack.config')
const merge = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const ExtractPlugin = require('extract-text-webpack-plugin')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

const webpackConfig = merge(baseWebpackConfig, {
  entry: {
    app: resolve('src/index.js'),
    vendor: ['vue', 'vue-loader']
  },

  output: {
    filename: '[name].[chunkHash:8].js'
  },

  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true
              }
            },
            'sass-loader'
          ]
        })
      }
    ]
  },

  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')

    }),
    new UglifyJsPlugin(),
    new ExtractPlugin('styles.[contentHash:8].css')
  ],

  optimization: {

    runtimeChunk: {
      name: 'runtime' 
    },
    
    splitChunks: { 
      cacheGroups: { 
        commons: { 
          chunks: 'initial', 
          minSize: 0,
          minChunks: 1
        },
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor', 
          chunks: 'all'
        }
      }
    }
  }
})

基本配置

const path = require('path')
const HTMLPlugin = require('html-webpack-plugin')
const webpack = require('webpack')

const isDev = process.env.NODE_ENV === 'development'

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

const config = {
  target: 'web',
  context: path.resolve(__dirname, '../'), 
  entry: resolve('src/index.js'),
  output: {
    filename: 'bundle.[hash:8].js', 
    path: resolve('dist')
  },

  resolve: {
    extensions: ['.js', '.vue', '.jsx',  '.json'],
    alias: {
      'vue$': 'vue/dist/vue.runtime.esm.js',
      '@': resolve('src'),
    }
  },

  module: {
    rules: [
      {
        test: /\.vue$/,
        include: [resolve('src')],
        loader: 'vue-loader'
      },
      {
        test: /\.jsx$/,
        include: [resolve('src')],
        loader: 'babel-loader'
      },
      {
        test: /\.( gif|jpg|jpeg|png|svg )$/,
        use: [
          {  
            loader: 'url-loader', 
            options: {
              limit: 1024,  
              name: '[name].[ext]'
            }
          }
        ]
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '[name].[hash:8].[ext]'
        }
      }
    ]
  },

  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: isDev ? '"development"' : '"production"' 
      }
    }),
    new HTMLPlugin({
      filename: 'index.html', 
      template: 'index.html',
    })
  ],

  node: {
    fs: 'empty'
  }
}

if (isDev) {
  config.module.rules.push({
    test: /\.scss$/,
    include: [resolve('src')],
    
    use: [
      'style-loader',
      'css-loader',
      {
        loader: 'postcss-loader',
        options: {
          sourceMap: true,
          config: {
            path: './postcss.config.js'
          }
        }
      },
      'sass-loader'
    ]
  })

  config.devtool = '#cheap-module-eval-source-map' 

  config.devServer = {
    port: '8080', 
    host: '0.0.0.0',
    overlay: {  
      error: true,
    },
    hot: true 
  }

  config.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  )

}

module.exports = config

node script

"build": "cross-env NODE_ENV=production webpack --progress --config build/webpack.prod.config.js --mode production",
"start": "cross-env NODE_ENV=development webpack-dev-server --progress --config build/webpack.config.js --mode development"