webpack2-3基本配置

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()
    ]
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值