目录结构如上图,在打包后,插入的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