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
} )()
// 非webpack 自带插件 需要引入后使用
const ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
// context: 如果不通过path.resolve 配置入口访问路径 watch: true失效
context: path.resolve('./'),
entry: Object.assign(fileNames, {public: ['jquery', '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: /\.(css)$/,
use: ExtractTextPlugin.extract({
// cnpm install postcss-smart-import precss autoprefixer --save-dev
// postcss-loader: (Autoprefixer 需要用这个插件)自动补全 CSS前缀
use: ['css-loader', 'postcss-loader']
})
},
{
test: /\.jsx?$/,
loader: 'babel-loader',
// exclude: babel 不打包哪些JS文件 加快打包速度
exclude: /node_modules/,
options: {
presets: ['es2015']
}
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
// 公共模块名称 有多个 使用数组
// 匹配entry 入口文件名 相同的单独打包 其他模块统一抽取公共代码到commons.js中
// css文件默认打包到一个公共CSS里 common.css
// 公共文件也必须在在这里打包 否则公共文件会出现在其他文件里
names: ['commons', 'public']
}),
// ExtractTextPlugin 对每个入口 chunk 都生成对应的一个文件
// 所以当你配置多个入口 chunk时 你必须使用 [name] [id] [contenthash]
new ExtractTextPlugin({
// filename: 提取后的css名称
// [name]: chunk 的文件名
// [contenthash: num]: 提取文件根据内容生成的哈
// * 路径相对于 output里的path
// filename: '../styles/[name].[contenthash:3].css'
filename: 'styles/[name].css'
}),
// DefinePlugin: 创建一个在编译时可以配置的全局变量 一般用来区分开发模式 发布模式
// 这里定义的变量 编译以后就被替换 不会暴露变量名 (如果在全局变量中定义)
// 会暴露变量名 后期还可能覆盖这个变量名 存在风险
// 定义变量值 要使用 JSON.stringify
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify('开发测试'),
ARRAY: JSON.stringify([1, 2, 3])
}),
new webpack.optimize.UglifyJsPlugin({
// beautify
// true: 美化代码输出
// false: 压缩代码 会删除部分注释
beautify: false,
// comments
// true: 保留所有注释
// false: 删除所有注释
comments: false
})
],
watch: true
}