const glob = require('glob')
const webpack = require('webpack')
const path = require('path')
const fileNames = ( function (obj = {}) {
glob.sync('app/*.js').forEach(v => {
let key = v.match(/([^/]+)\.js/img)
obj[RegExp.$1] = `./${v}`
})
return obj
} )()
module.exports = {
// context: 如果不通过path.resolve 配置入口访问路径 watch: true失效
context: path.resolve('./'),
entry: Object.assign(fileNames, {public: ['vue']}),
output: {
// filename: 编译的文件名 仅用于命名每个文件
// [name]: 多入口形式 入口文件名替换这里的name
// [chunkhash: num]: 入口文件的hash值 用于修改后清空缓存
// filename: '[name].[chunkhash:3].js',
filename: 'js/[name].js',
// 包存放的目录
path: path.resolve('./build'),
publicPath: 'http://localhost/'
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
]
},
/**
* externals : 引用外部 非本地或node_module中文件的方式 (例如引用cdn的js文件)
* jquery : 表示通过 import 或 require引用源的名字 例: import $ from 'jquery'
* jQuery : 通过externals引入框架的变量
* 在页面里通过 <script src="不同webpack打包的外部js文件">
然后使用 import $ from 'jquery' 引入jq的变量 就可以使用了 (webpack 不能打包 远程文件 所以如果
需要使用远程文件 就使用externals方式引入
* 模块化开发拒绝一切 全局变量 因为任何一个页面一旦改变了全局变量的值 例: $ = 123 这时全局变量的 $ 就报错了
*/
externals: {
jquery: 'jQuery',
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
// 公共模块名称 有多个 使用数组
// 匹配entry 入口文件名 相同的单独打包 其他模块统一抽取公共代码到commons.js中
// css文件默认打包到一个公共CSS里 common.css
// 公共文件也必须在在这里打包 否则公共文件会出现在其他文件里
names: ['commons', 'public']
})
],
watch: true
}