素材牛VIP会员
webpack 打包 路径引入不对
 mo***id  分类:JavaScript  人气:1414  回帖:1  发布于6年前 收藏

目录结构如上图,在打包后,插入的JS 是相对于dist这个目录

完成配置

const htmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const webpack = require('webpack')
const path = require('path')
const glob = require('glob')

let entries = {}
let HTMLPlugins = []

function getEntry (globPath) {
  glob.sync(globPath).forEach(entry => {

    let nType = entry.split('/')[2]
    entries[nType] = entry

    const htmlPlugin = new htmlWebpackPlugin({
      filename: `${nType}/index.html`,
      template: path.resolve(__dirname, `../src/${nType}/index.html`),
      chunks: [`${nType}`]
    })

    HTMLPlugins.push(htmlPlugin)

  })

}

getEntry('./src/**/js/index.js')

const config = {
  entry: entries,
  devtool:"cheap-module-source-map",
  output: {
    filename:'[name]/js/[name].js',
    path: path.join(__dirname, '../dist'),
    publicPath:'./'
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ],
  },
  plugins: [
    new CleanWebpackPlugin(["./dist"]),
    new webpack.optimize.UglifyJsPlugin(),
    ...HTMLPlugins
  ],
  externals: {
    jquery: 'src/home/js/jquery-1.9.1.min'
  }
}

module.exports = config
 标签:webpackjavascript

讨论这个帖子(1)垃圾回帖将一律封号处理……

Lv6 码匠
q1***51 UI设计师 6年前#1
filename: `${nType}/index.html`

改成

filename: `./index.html`

试试

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取