webpack2-3基本配置

发布时间:2019-08-10 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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()
    ]
}

脚本宝典总结

以上是脚本宝典为你收集整理的webpack2-3基本配置全部内容,希望文章能够帮你解决webpack2-3基本配置所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。