webpack之自定义loader并且测试

最新推荐文章于 2024-05-09 18:25:29 发布

weixin_33675507

最新推荐文章于 2024-05-09 18:25:29 发布

阅读量485

点赞数

文章标签： webpack javascript python ViewUI

原文链接：https://my.oschina.net/yan5845hao/blog/889925

版权

2019独角兽企业重金招聘Python工程师标准>>>

新建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

代码地址

转载于:https://my.oschina.net/yan5845hao/blog/889925

weixin_33675507

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack之自定义loader并且测试

2019独角兽企业重金招聘Python工程师标准>>> ...
复制链接

扫一扫

webpack之自定义loader并且测试

“相关推荐”对你有帮助么？