文档章节

webpack之自定义loader并且测试

y
 yan5845hao
发布于 2017/05/01 15:12
字数 405
阅读 175
收藏 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
粉丝 7
博文 120
码字总数 21375
作品 0
扬州
程序员
从零开始到发布上线,如何自定义一个webpack loader

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

林楠
05/16
0
0
Webpack(一)

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

ruanzy
2016/08/19
19
0
打包利器webpack

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

笔阁
2015/12/25
412
0
webpack 从入门到放弃(一)

什么是 webpack,为什么要使用 webpack 什么是 webpack 官网给出的概念是: 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,...

sunshine小小倩
06/25
0
0
Web 开发中的利器 - Webpack

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

刘 刚
2017/10/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

这些Spring中的设计模式,你都知道吗?

设计模式作为工作学习中的枕边书,却时常处于勤说不用的尴尬境地,也不是我们时常忘记,只是一直没有记忆。 Spring作为业界的经典框架,无论是在架构设计方面,还是在代码编写方面,都堪称行...

Java填坑之路
23分钟前
1
0
Spring Aop原理之Advisor过滤

在上文(Spring Aop之Advisor解析)中我们讲到,Spring Aop对目标bean的代理主要分为三个步骤:获取所有的Advisor,过滤当前bean可应用的Advisor和使用Advisor为当前bean生成代理对象,并且上文...

爱宝贝丶
33分钟前
0
0
JMockit学习教程

1 JMockit中文网 我觉得如果仅仅是开发自测的话,把JMockit中文网认真看一遍,就可以在项目中使用JMockit了。 http://jmockit.cn/index.htm 2 JMockit中文教程 官方文档中文版。对于不喜欢看...

SuperHeroes
45分钟前
0
0
Linux服务器几乎从不采用Arch Linux?

我们见得多的Linux服务器系统一般都是什么Ubuntu Server啊,什么Cent OS啊,什么Fedora啊,或者企业采用的Red Hat啊,为什么几乎没有Arch Linux呢?下面我将从若干个方面指出Arch Linux在服务...

linux-tao
56分钟前
0
0
js 函数柯里化 闭包

参考 https://mp.weixin.qq.com/s/GEHL3jarDdAAcr5tQGjmDg 一个统计求和的函数 需要知道整个数组的信息,然后遍历求值 function countMoney() { let money = 0 // 温馨提示:arguments...

阿豪boy
59分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部