标签webpack下的文章

admin 发布于 10月28, 2018

webpack img图片处理

先说个其他的事,昨天晚上翻之前的博客,发现七牛有些图片用不了,查了一下才知道它的测试域名会过期。。。真是日了狗了,不知道有没有办法说每个月支付点钱,能一直使用,MS没有找到这种入口。最蛋疼的是我的这个域名是不需要备案,它就必须要提供备案通过的域名。

哎~~我MS有80来张图,是放在七牛上面的,到时候得想个方案搞下来了,想想真TM忧伤,对七牛无感了。

阅读全文 »

admin 发布于 06月28, 2018

tapable笔记

webpack本质上是一种事件流的机制,它的工作流程就是将各个插件串联起来,而实现这一切的核心就是tapable,webpack中最核心的负责编译的Compiler和负责创建bundles的Compilation都是Tapable的实例

Tapable 是一个小型的库,允许你对一个 javascript 模块添加和应用插件。它可以被继承或混入到其他模块中。类似于 NodeJS 的 EventEmitter 类,专注于自定义事件的触发和处理。除此之外,Tapable 还允许你通过回调函数的参数,访问事件的“触发者(emittee)”或“提供者(producer)”。

类似EventEmitter,可似乎比它要强大一些。

阅读全文 »

admin 发布于 05月09, 2018

webpack4配置笔记

一眨眼的事,webpack已经更新到4.6了。

alt

个人感觉也差不多可以入坑了。不过怕就怕再过个半年,来个5.x,但愿5.x和4.x区别不大吧。

阅读全文 »

admin 发布于 11月24, 2016

webpack之modulesDirectories

我的主管是一个相对保守的人,她觉得用bower比较适合我厂。

理由是npm包太多太杂,然后可能有bug,或者UI上的区别。这时候可能做覆盖并不是最佳选择,也许在它原有代码基础上做修改会更适合一些。

当然我个人是npm派,觉得要与时俱进,但我认同她的观点。

众所周知,在node中,

require("xxx")

xxx这个模块肯定在node_modules中,这个无法变更成其他目录的

但从node到前端后,通过webpack,我们就可以指定xxx的目录。当然了,它有两种方式。

  • 通过resolve.alias
resolve: {
    // require时省略的扩展名,如:require('module') 不需要module.js
    extensions: ['', '.js', '.vue'],
    // 别名,可以直接使用别名来代表设定的路径以及其他
    alias: {
        iview: path.join(__dirname, 'src/libs/iview'),
        filter: path.join(__dirname, 'src/filters'),
        components: path.join(__dirname, 'src/components')
    }
}
  • 通过resolve.modulesDirectories
resolve: {
    modulesDirectories: ["src/libs", "node_modules"]
}

很明显,下面的方式更优。因为通常我们都是把所有的组件放在同一个目录下,如果以别名机制来写的,那要写上很多个才行,而modulesDirectories只要写一个即可。

阅读全文 »

admin 发布于 11月24, 2016

webpack之publicPath

之前在用gulp-connect的时候,有碰到过这样一个问题,比如下面的目录结构:

menu

假设root的配置为demo,那我如果想用和demo平级的dist文件夹下的文件,那么就不可以了。

不确定这样写行不行:

root: ["demo", "dist"]

不过个人感觉应该不行。

而webpack在做这一块上面,比较方便。配置简单如下:

var openBrowserWebpackPlugin = require('open-browser-webpack-plugin'),
    ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: './src/js/dui.js',
    output: {
        path: __dirname + "/dist/", // 输出文件的保存路径
        publicPath: "/dist/",
        filename: 'js/dui.js', // 输出文件的名称
        library: 'Dui',
        libraryTarget: 'umd'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: ['babel?presets[]=es2015'],
                exclude: /node_modules/
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader", {publicPath: "../"})
            }
        ]
    },
    devServer: {
        stats: { colors: true },
        publicPath: "/dist/",
        contentBase: 'demo',
        port: 8090,
        watch: true,
        progress: true,
        "display-error-details": true
    },
    plugins: [
        new ExtractTextPlugin("css/dui.css"),
        new openBrowserWebpackPlugin({ url: 'http://localhost:8090' })
    ]
}

之前也提过,我最近在写的组件项目,用到了三个构建工具:FIS、gulp、webpack,想想确实也不是太合理。最终还是去掉了FIS。

不过感受下来,就是webpack,如果针对页面级的写代码,而不是模块化的css、js,还是FIS开发来的爽。

阅读全文 »

admin 发布于 11月16, 2016

webpack指定node_modules某个模块babel

前阵子碰到个问题,希望自己写的类库,能让别人通过

import {Modal} from 'Dui';

这样来使用,但因为我的Modal模块是通过es6来书写代码的。

我们查看基本的webpack配置,它是这样的:

module: {
    loaders: [
        { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
    ]
}

上面的代码加了之后,明显在node_modules下面的模块就无法使用了。在群友的帮助下,找到了一个解决的方案

{ test: /\.js$/, loader: 'babel', exclude: /node_modules(?!\/Dui)/ },

但其实这个方案并不完美,如果node_modules下有多个文件夹需要es6 babel的话,就会导致路径比较长,所以建议:

  include: [
    path.resolve(__dirname, "src"),
    path.resolve(__dirname, "node_modules/ui")
  ]

不使用exclude。

另外在写类库的时候,之前的入口index.js是这样的写的:

import Modal from "./component/modal";

import Animate from "./component/animate";

import Tip from "./component/tip";

import Selectpicker from "./component/select.js";

window["Dui"] = module.exports = {
    Modal,
    Animate,
    Tip,
    Selectpicker
}

这样难免很挫,翻了一下RegularUI的写法,它的webpack是这样配置的:

module.exports = {
    output: {
        filename: 'regular-ui.js',
        library: 'RGUI',
        libraryTarget: 'umd'
    }
}

也就是说其实上面的window["Dui"]是可以去掉的,我只需要在webpack下进行配置就行了:

module.exports = {
    entry: './src/js/dui.js',
    output: {
        path: "./dist/js", // 输出文件的保存路径
        filename: 'dui.js', // 输出文件的名称
        library: 'Dui',
        libraryTarget: 'umd'
    },
    module: {
        loaders: [{
            test: /\.js$/,
            loaders: ['babel?presets[]=es2015'],
            exclude: /node_modules/
        }]
    }
}

阅读全文 »

admin 发布于 11月08, 2016

gulp整合webpack

之前我提及过,用FIS打包类库,是一件超级蛋疼的事。特别是要生成.css,.min.css,.js,.min.js类似这样的。所以gulp也许是一个好一点的方案。但是gulp在js模块化打包方面,远不如webpack。因此我们需要将webpack整合到gulp中。

整合的代码如下:

var webpack = require('webpack'),
     webpackConfig = require('./webpack.config.js');
var myDevConfig = Object.create(webpackConfig);

var devCompiler = webpack(myDevConfig);

//引用webpack对js进行操作
gulp.task("build-js", function(callback) {
    devCompiler.run(function(err, stats) {
        if(err) throw new gutil.PluginError("webpack:build-js", err);
        gutil.log("[webpack:build-js]", stats.toString({
            colors: true
        }));
        //这里额外做一些操作
        gulp.src("./dist/js/dui.js")
            .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名
            .pipe(uglify())    //压缩
            .pipe(gulp.dest('./dist/js'))
            .pipe(gzip())
            .pipe(gulp.dest('./dist/js'));
        callback();
    });
});

webpack的配置文件简单如下:

module.exports = {
    entry: './src/js/dui.js',
    output: {
        path: "./dist/js", // 输出文件的保存路径
        filename: 'dui.js' // 输出文件的名称
    },
    module: {
        loaders: [{
            test: /\.js$/,
            loaders: ['babel?presets[]=es2015'],
            exclude: /node_modules/
        }]
    }
}

Dui是我正在写的一套针对小企业部门的UI类库,地址是:DUi,欢迎大家试用,也欢迎给我提pr,或者提issue。

这个代码主要是ES6来书写,利用了lodash这个函数库的一些方法,来实现具体的功能。

阅读全文 »