const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
var htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: {
'index': './assets/js/index.es6'
},
output: {
// path:指定编译的路径
path: path.join(__dirname, './assets/'),
// publicPath:给每个编译好的文件,在html中前面加上同样的路径
publicPath: './',
filename: 'js/[name].bundle.js'
},
module: {
rules: [{
test: /\.es6$/,
use: [{
loader: 'babel-loader',
options: {
presets: [
['env', {
//关闭babel编译es6,打开treeShaking
modules: false
}],
]
}
}]
}, {
test: /\.less$/i,
use: ExtractTextPlugin.extract({
// fallback 所有的loader都失败了,才调用这个
fallback: 'style-loader',
use: [{
loader: 'css-loader'
}, {
loader: 'less-loader'
}]
})
}]
},
// 放到cdn,就不需要打包进项目了
external:{
jquery:'window.$'
},
plugins: [
new ExtractTextPlugin("css/[name].css"),
//提取出公用代码
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
minChunks: 2,
filename: 'js/[name].js'
}),
// 自动把静态文件插入html
new htmlWebpackPlugin({
filename: 'index.html',
template: './index.html',
inject: true
}),
// treeShaking 开启压缩,自动去除没用到不需要的代码
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: true
},
output: {
comments: false
},
sourceMap: false
}),
// 把没用的function干掉了,代码看起来更好看
new webpack.optimize.ModuleConcatenationPlugin()
]
}
webpack2-3基本配置
最新推荐文章于 2024-11-04 21:01:46 发布