webpack 常用配置自用

big_cat 发布于2019-08-23 17:13 / 1228人阅读

摘要：排除的范围包含的范围可以在中加入压缩图片

var htmlWebpackPlugin = require("html-webpack-plugin");
var CleanWebpackPlugin = require("clean-webpack-plugin");
var path = require("path");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
module.exports = {
    entry:"./lib/main2.js",
    output:{
        path: path.resolve(__dirname, "../lib"),
        filename:"[name].[hash].js"
    },
    module:{
        loaders:[
            {
                test:/.js$/,
                loader:"babel-loader",
                // exclude:"./node_modules/",//排除的范围

                include:path.resolve(__dirname, "../lib/"),//包含的范围
                // query:{
                //     presets:["lastest"]
                // }
                // 可以在package.json中加入
                // "babel":{
                //     "presets":["lastest"]
                 // },
            },
            {
                test:/.css$/,
                loader:"style-loader!css-loader?importLoaders=1!postcss-loader"
            },
            {
                test:/.less$/,
                loader:"style-loader!css-loader?importLoaders=1!postcss-loader!less-loader"
            },
            {
                test:/.html$/,
                loader:"html-loader"
            },
            {
                test:/.tpl$/,
                loader:"ejs-loader"
            },
            // {
            //     test:/.(png|jpg|gif|svg)$/i,
            //     loader:"file-loader",
                // query:{
            //         name:"assets/[name].[ext]"
                // }
            // },
            {
                test:/.(png|jpg|gif|svg|woff|eot|ttf)$/i,
                loaders:[
                    "url-loader?limite=20000&name=assets/[name].[ext]",
                    "image-webpack-loader"//压缩图片
                ],
                // loader:"url-loader",
                // query:{
                //     limit:20000,
                //     name:"assets/[name].[ext]"
                // }
            }
        ]
    },
    
    plugins:[
        new htmlWebpackPlugin({
            filename:"../index.html",
            template:"index2.html",
            inject:"body"
        }),
         new UglifyJsPlugin(),
        new CleanWebpackPlugin(
            [
                path.resolve("lib/main.*.js"),
            ],
            {
                root: path.resolve(__dirname, "../lib/"),
                verbose: true,
                dry: false,
                watch: true,
            }
        ),
    ]
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103988.html

gulp常用功能集合（开发和生产分离、静态资源压缩优化、代码优化、实时预览、hash）

摘要：在资源很多时，例如图片的复制，这个会加快任务的执行速度，特别是需要实时预览时，减少延迟。但是作为个入门短时间内还是不能够被取代得了的。 gulp常用功能集合（开发和生产分离、静态资源压缩优化、代码优化、实时预览、hash） tags: gulp 前端自动化开发 npm仓库下载地址https://www.npmjs.com/package/cddgulp [TOC]本人自用在此基础上的...

silvertheo 2019-08-20 14:39 评论0 收藏0
自用Java爬虫工具JAVA-CURL已开源

摘要：工具和资料群高级爬虫作者自建群，欢迎加入作者收集的爬虫相关工具和资料简介类是以命令行工具为参考，使用标准的实现的工具类。 showImg(https://segmentfault.com/img/remote/1460000018765904); 工具和资料 QQ群 - Javascript高级爬虫 - 作者自建群，欢迎加入！ awesome-java-crawler - 作者收...

william 2019-08-16 13:46 评论0 收藏0
Assassin暗杀者-自用短小精悍的webshell管理工具分享

摘要：是一款精简的基于命令行的管理工具，它有着多种发送方式和编码方式，以及精简的代码，使得它成为隐蔽的暗杀者，难以被很好的防御。AssassinAssassin是一款精简的基于命令行的webshell管理工具，它有着多种payload发送方式和编码方式，以及精简的payload代码，使得它成为隐蔽的暗杀者，难以被很好的防御。自用工具开源互相学习，工具短小精悍，生成的webshell能够过目前主流杀...

solocoder 2021-11-24 09:39 评论0 收藏0
表单验证失败提示方案（自用）

摘要：方案动态计算定位，于失败项附近，并定时消失，多个提示一同显示。遇到问题当表单处于中，并且表单高度大于高度，验证失败项又刚好在被隐藏的部分，需要对这部分提示做特殊处理，暂且处理为不显示这部分提示。方案动态计算定位，fixed于失败项附近，并定时消失，多个提示一同显示。遇到问题当表单处于dialog中，并且表单高度大于dialog高度，验证失败项又刚好在被overflow隐藏的部分...

CoyPan 2019-08-23 14:01 评论0 收藏0