webpack配置项路径

1,040 阅读1分钟

webpack配置项路径

在配置文件中,文件的引入使用相对路径没有问题。因为它只是一个node.js的commonjs模块导入。
比如vue cli2的build/webpack.base.config.js

const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.config')
const devConfig = require('./webpack.dev.config')
const proConfig = require('./webpack.pro.config')

但是webpack配置项中就不能使用相对路径了,而要使用绝对路径。
因为相对的不是你当前这个文件所在的目录,而是相对于你在哪个目录执行的webpack命令
所以如果当你执行命令的目录和webpack.config.js在同一个目录时,没有任何问题。 我们是通过npm或者yarn在项目根目录执行的命令(因为package.json在根目录)所以build目录中配置文件中配置项的路径是在项目根目录开始计算的,所以不能直接使用相对路径。要使用相对路径也要清楚是从根目录开始算的,而不是配置文件当前所在的目录。最好是使用绝对路径,使用nodejs的path模块可以轻松配置绝对路径

module.exports = {
  entry: path.join(__dirname, './../src/app.ts'),
  output: {
    filename: 'app.js'
  },
  resolve: {
    extensions: ['.js', '.ts', '.tsx']
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/i,
        use: [{
          loader: 'ts-loader'
        }],
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, './../public/index.html')
    })
  ]
}

path.join()是在当前使用它的文件的绝对路径上和第二个参数的相对路径拼在一起形成一个绝对路径