文档章节

webpack之自定义loader并且测试

y
 yan5845hao
发布于 2017/05/01 15:12
字数 405
阅读 268
收藏 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

代码地址

© 著作权归作者所有

共有 人打赏支持
上一篇: java AOP 之 AspectJ
下一篇: 构建Class
y
粉丝 7
博文 124
码字总数 22079
作品 0
扬州
程序员
私信 提问
webpack loader—自己写一个按需加载插件

写在前面: 在开发的工程中,线上环境需要引入一些统计和打印日志的js文件。但是对于开发环境,加速打包速度减少页面渲染时间很关键。我于是想根据开发环境,写一个简单的loader,按需加载一些...

圆儿圈圈
09/04
0
0
从零开始到发布上线,如何自定义一个webpack loader

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

林楠
05/16
0
0
webpack loader和plugin编写

1 基础回顾 首先我们先回顾一下webpack常见配置,因为后面会用到,所以简单介绍一下。 1.1 webpack常见配置 这里面我们重点关注 module和plugins属性,因为今天的重点是编写loader和plugin,...

幽灵之夜_陈龙
10/11
0
0
Webpack揭秘——走向高阶前端的必经之路

随着前端工程化的不断发展,构建工具也在不断完善。作为大前端时代的新宠,webpack渐渐成为新时代前端工程师不可或缺的构建工具,随着webpack4的不断迭代,我们享受着构建效率不断提升带来的...

jerryOnlyZRJ
09/28
0
0
打包利器webpack

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

笔阁
2015/12/25
4.1K
0

没有更多内容

加载失败,请刷新页面

加载更多

Kylin2.5.0环境搭建及操作记录

Apache Kylin是一个开源的分布式分析引擎,提供Hadoop/Spark之上的SQL查询接口及多维分析(OLAP)能力以支持超大规模数据,最初由eBay Inc. 开发并贡献至开源社区。它能在亚秒内查询巨大的H...

PeakFang-BOK
15分钟前
1
0
SpringBoot整合es

文档对像 @Document(indexName = "bigdata",type = "tag")public class User { @Idprivate String openid; private List<String> tags;public String getOpenid() ......

魔法王者安琪拉
19分钟前
1
0
windows下让 jar 在后台运行的办法

windows下 运行 java jar 不出现 命令行 窗口 新建一个披处理 run.bat,内容如下 @echo off start javaw -jar xx.jar exit 双击运行即可。...

glen_xu
28分钟前
4
0
jdk1.8 lambda stream 指定的对象属性进行去重

原因:因为Stream提供的distinct()方法只能去除重复的对象,无法根据指定的对象属性进行去重,可以应付简单场景。 解决方案: //去重,共同信息保存到bizPledgeSupplierVOs里bizPledgeSupp...

INSISTQIAO
30分钟前
0
0
vue nextTick深入理解---vue性能优化、DOM更新时机、事件循环机制

定义[nextTick、事件循环] nextTick的由来: 由于vue的数据驱动视图更新是异步的,即修改数据的当下,视图不会立即更新,而是等同一事件循环中的所有数据变化完成之后再统一进行视图更新。...

JamesView
39分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部