文档章节

webpack之自定义loader并且测试

y
 yan5845hao
发布于 2017/05/01 15:12
字数 405
阅读 118
收藏 0
点赞 0
评论 0
  • 新建test-loader项目
$ mkdir test-loader
$ cd test-loader/
  • 在项目中创建package.json
{
  "name": "test-loader",
  "version": "0.0.1",
  "author": {
    "name": "yanhao",
    "email": "<yan5845hao@qq.com>"
  },
  "main": "index.js",
  "scripts": {
    "test": "webpack --progress --colors --config ./build/webpack.base.conf.js",
  },
  "license": "MIT",
  "dependencies": {

  },
  "devDependencies": {
    "webpack": "^2.4.1"
  }
}
  • 在项目中build下创建webpack.base.conf.js
var path = require('path');
module.exports = {
    entry: './test/js/app.js',
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: path.posix.join('','js/[name].[chunkhash].js'),
        chunkFilename: path.posix.join('', 'js/[id].[chunkhash].js')
    },
    resolve:{
        extensions: ['.vue','.js', '.json']
    },
    module: {

        loaders: [
            { test: /\.vue$/, loader: '../test-loader' }
        ]
    },
    plugins: [
        // 用来定义全局变量
        new webpack.DefinePlugin({
            'process.env': 'production'
        }),
        // js压缩工具
        // 引入UglifyJsPlugin插件
        // 最小化所有JavaScript输出块,消除无作用的代码。
        new webpack.optimize.UglifyJsPlugin({
            // 开启最小化模式,但是关闭警告功能
            compress: {
                warnings: false
            }
        }),

        // 构建要编译输出的index.html,并在文件中嵌入资源文件
        new HtmlWebpackPlugin({
            // 文件路径
            filename: path.resolve(__dirname, '../dist/index.html'),
            // 模板文件 (index.html)
            template: 'test/index.html',
            // javascript 资源将被放置到 body 元素的底部
            inject: true,
            // 传递 html-minifier 选项给 minify 输出
            minify: {
                removeComments: true,// 去掉注释
                collapseWhitespace: true,  // 去掉空格
                removeAttributeQuotes: true // 移除属性的引号
            },
            // 控制块在添加到页面之前的排序方式
            // 通过CommonsChunkPlugin控制chunks在html文件中添加的顺序
            // 设置为dependency即按照它们之间的依赖关系添加
            chunksSortMode: 'dependency'
        })
    ]
};
  • 在项目中test下创建index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test-loader</title>
</head>
<body>
<script src="js/main.js"></script>
<script>
    console.log(uwo.UI);
</script>
</body>
</html>
  • 在项目中test下创建index.vue
<template>
    <div>
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
    </div>
</template>
  • 在项目中test下创建app.js
var index = require('./index');
module.exports = window.uwo = index;
  • 项目中创建index.js 这个是loader实现
module.exports = function (source) {
    source = source.replace(/(\n)+|(\r\n)+|( )+/g, "");
    return "module.exports = {'UI':'" + source + "'}";
}
  • 测试命令
npm run test

代码地址

© 著作权归作者所有

共有 人打赏支持
y
粉丝 6
博文 103
码字总数 20787
作品 0
扬州
程序员
从零开始到发布上线,如何自定义一个webpack loader

关于 前两天在使用webpack搭建移动端web的时候,需要使用到动态修改html的font-size。考虑到只有几行代码,我想把镶嵌到中,同时我希望能够随时修改它的源码,并且最后输出到html中是压缩过后的...

林楠 ⋅ 05/16 ⋅ 0

Webpack(一)

Webpack傻瓜式指南(一) Webpack最近很热,我一开始是想翻译一篇国外关于webpack的佳作,但是找来找去也没有一篇让我感觉到很满意的,好多都是一步到位,满屏幕都是React+Webpack,官方文档...

ruanzy ⋅ 2016/08/19 ⋅ 0

打包利器webpack

什么是 Webpack Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。 为什么重复造轮子   市面上已经存在的模块管理和打包...

笔阁 ⋅ 2015/12/25 ⋅ 0

webpack启蒙教学

自我介绍环节 webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler) 。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要...

桂圆_noble ⋅ 2017/08/24 ⋅ 0

Web 开发中的利器 - Webpack

Web 开发中的利器 - Webpack 刘 刚 2017 年 10 月 30 日发布 简介 伴随着互联网的出现,网站的表现形式也变得越来越丰富多彩。页面不仅要求内容的充实,表现形式的丰富,而且越来越关注用户的...

刘 刚 ⋅ 2017/10/30 ⋅ 0

webpack之loader和plugin简介

webpack是一个模块打包器(module bundler),提供了一个核心,核心提供了很多开箱即用的功能,同时它可以用loader和plugin来扩展。webpack本身结构精巧,基于tapable的插件架构,扩展性强,...

终端技术 ⋅ 2017/08/01 ⋅ 0

webpack 之 loader 和 plugin 简介

作者介绍:赵鹏,美团点评点餐团队成员 webpack是一个模块打包器(module bundler),提供了一个核心,核心提供了很多开箱即用的功能,同时它可以用loader和plugin来扩展。webpack本身结构精...

美团点评点餐 ⋅ 2017/08/01 ⋅ 0

【天赢金创】我是如何看待React 组件开发

从 auto-ellipsis 看 React 组件开发 auto-ellipsis 是一个用于解决文本超长溢出截断并加 ... 的 React 组件。 关于 React 随着 React 的火热,随之而来的负面消息也变得更多。之前网上就有人...

第三方支付接口 ⋅ 2015/09/24 ⋅ 0

Webpack4 新手完全攻略

为了优化前端工程, 我们通常会将静态文件压缩,减少带宽占用; 将静态文件合并,减少http请求, webpack可以轻易实现静态文件的压缩合并以及打包的功能, 除此之外, webpack还支持众多的loader插件...

木子昭 ⋅ 04/25 ⋅ 0

webpack初体验

Webpack最近貌似很火啊,所以挤空学习掌握了一下,主要最近打算做个自己的网站,后端用node+mongodb,所以没什么时间 Webpack是一个模块打包器。它将根据模块的依赖关系进行静态的分析,然后...

邪气小生 ⋅ 2016/10/24 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

vim编辑模式、命令模式

编辑模式 vim要从一般模式进入编辑模式只要按字母 i 、I、a、A、o、O键就可以了 要从编辑模式回到一般模式按键盘上的Esc键即可。 按键 作用 i 在当前字符前插入 I 在光标所在行的行首插入 o ...

黄昏残影 ⋅ 29分钟前 ⋅ 0

OSChina 周五乱弹 —— 如果有一天不当程序员了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @guanglun :分享off的单曲《我唱情歌给你听》 《我唱情歌给你听》- off 手机党少年们想听歌,请使劲儿戳(这里) @小小编辑 :#如果不做程序...

小小编辑 ⋅ 36分钟前 ⋅ 5

从 Confluence 5.3 及其早期版本中恢复空间

如果你需要从 Confluence 5.3 及其早期版本中的导出文件恢复到晚于 Confluence 5.3 的 Confluence 中的话。你可以使用临时的 Confluence 空间安装,然后将这个 Confluence 安装实例升级到你现...

honeymose ⋅ 今天 ⋅ 0

Java8新增的DateTimeFormatter与SimpleDateFormat的区别

两者最大的区别是,Java8的DateTimeFormatter也是线程安全的,而SimpleDateFormat并不是线程安全。 在并发环境下使用SimpleDateFormat 为了能够在多线程环境下使用SimpleDateFormat,有这三种...

人觉非常君 ⋅ 今天 ⋅ 0

多线程如何控制执行顺序

线程的生命周期说明: 当线程被创建并启动以后,它既不是一启动就进入了执行状态,也不是一直处于执行状态,在线程的生命周期中,它要经过新建(New)、就绪(Runnable)、运行(Running)、...

MarinJ_Shao ⋅ 今天 ⋅ 0

用ZBLOG2.3博客写读书笔记网站能创造今日头条的辉煌吗?

最近两年,著名的自媒体网站今日头条可以说是火得一塌糊涂,虽然从目前来看也遇到了一点瓶颈,毕竟发展到了一定的规模,继续增长就更加难了,但如今的今日头条规模和流量已经非常大了。 我们...

原创小博客 ⋅ 今天 ⋅ 0

MyBatis四大核心概念

本文讲解 MyBatis 四大核心概念(SqlSessionFactoryBuilder、SqlSessionFactory、SqlSession、Mapper)。 MyBatis 作为互联网数据库映射工具界的“上古神器”,训有四大“神兽”,谓之:Sql...

waylau ⋅ 今天 ⋅ 0

以太坊java开发包web3j简介

web3j(org.web3j)是Java版本的以太坊JSON RPC接口协议封装实现,如果需要将你的Java应用或安卓应用接入以太坊,或者希望用java开发一个钱包应用,那么用web3j就对了。 web3j的功能相当完整...

汇智网教程 ⋅ 今天 ⋅ 0

2个线程交替打印100以内的数字

重点提示: 线程的本质上只是一个壳子,真正的逻辑其实在“竞态条件”中。 举个例子,比如本题中的打印,那么在竞态条件中,我只需要一个方法即可; 假如我的需求是2个线程,一个+1,一个-1,...

Germmy ⋅ 今天 ⋅ 0

Django第一期

安装Django 去https://www.djangoproject.com/download/ 下载最新版的Django,然后解压放到Anaconda\Lib\site-packages目录下,然后cmd进入此目录,输入安装命令: python setup.py install ...

大不了敲一辈子代码 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部