20170622-webpack之plugin篇

Dean 发布于2019-08-20 17:27 / 2328人阅读

摘要：该插件的作用是为组件分配，通过这个插件会分析使用频率最多的模块，并未他们分配最小的，越小表示模块被找到的速度会更快使用方法用于抽取公共的模块

extract-text-webpack-plugin

extract-text-webpack-plugin主要是为了抽离css样式,并将样式打包成css文件

const ExtractTextPlugin = require("extract-text-webpack-plugin");
...
module: {
    rules: [
        {
            test: /.less$/,
            use: ExtractTextPlugin.extract({
                use: ["css-loader","less-loader"],
                fallback: "style-loader"
            })
        },
        {
            test: /.css$/,
            use: ExtractTextPlugin.extract({
                use: ["css-loader"],
                fallback: "style-loader"
            })
        }
    ]
},
plugins: [
    new ExtractTextPlugin("bundle/css/[name].css")
]

open-browser-webpack-plugin

当启动webpack时，会使浏览器打开指定页面

var OpenBrowserPlugin = require("open-browser-webpack-plugin");

plugins: [
    new OpenBrowserPlugin({ url: "http://localhost:8080" })
]

html-webpack-plugin

这个插件的作用是依据一个简单的模板，帮你生成最终的html文件，这个文件中自动引用了打包后的js文件。

webpack.ProvidePlugin

如果项目中需要使用jQuery类似的工具，难道需要在每一个文件中都加入require("jquery")吗？使用webpack.ProvidePlugin,可以使jquery变成全局变量，这样在项目的任何地方都可以直接使用

new webpack.ProvidePlugin({
    $: "jquery",
    jquery: "jquery"
})

webpack.BannerPlugin

这个插件的作用是给输出文件添加注释头。

使用方法

new webpack.BannerPlugin("Copyright by yanxin")

这样在打包生成的文件中都会包含上面的版权信息

webpack.optimize.UglifyJsPlugin

用于代码的压缩

new webpack.optimize.UglifyJsPlugin({
    compress: {
        warnings: false
    }
})

webpack.HotModuleReplacementPlugin

该插件允许你在修改组件代码后，自动刷新实时预览修改后的效果。

webpack.optimize.OccurenceOrderPlugin

该插件的作用是为组件分配id，通过这个插件webpack会分析使用频率最多的模块，并未他们分配最小的id，id越小表示模块被找到的速度会更快

使用方法：

new webpack.optimize.OccurenceOrderPlugin()

webpack.optimize.CommonsChunkPlugin

用于抽取公共的模块

云服务器 GPU云服务器之基础篇 plugins Plugin plugin源

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83593.html

20170622-webpack之loader篇

摘要：从打包后的文件中提取出特定的内容到一个新的文件中，需要配合使用，由指定提取文件的路径提取文件，使其变成代码。在打包过程中会将代码中资源的原始路径替换成资源的新路径在打包文件夹下资源的路径。 less-loader 处理代码中引入的less文件，通过对应的less模块，将less转变为css css-loader 通过css-loader，使得在css中能够使用@import和url(....

付永刚 2019-08-20 17:27 评论0 收藏0
webpack进阶之插件篇

摘要：基本环境搭建就不展开讲了一插件篇自动补全前缀官方是这样说的，也就是说它是一个自动检测兼容性给各个浏览器加个内核前缀的插件。上一篇博客讲解了webpack环境的基本，这一篇讲解一些更深入的内容和开发技巧。基本环境搭建就不展开讲了showImg(http://static.xiaomo.info/images/webpack.png); 一、插件篇 1. 自动补全css3前缀 autop...

Tonny 2019-08-19 18:33 评论0 收藏0
前端面试之webpack篇

摘要：面试你一般问你的原理，的原理，你有用那些优化措施前端开发已经模块化，它改进了代码库的封装和结构。这么说负责的是处理源文件的如，一次处理一个文件。小心的运用他们。因为随着项目的增长，它们会变得很难驯服。还是以前一样，有些概念面试可能会考，我都用*标记了出来，两句话就总结清楚其余的地方如果你想了解webpack，就仔细看看，虽然本教程不能让你webpack玩的很6，但是懂操作流程够了。面...

cangck_X 2019-08-21 16:47 评论0 收藏0
Babel.js插件开发之二 - 开始编写

摘要：完整专题上一篇已经介绍了编写插件所需要了解的基础知识，这篇我们就开始编写插件了。如字面意思，他们分别代表了节点数据父节点群数据。看到这里你已经可以动手开始尝试写一个插件了。使用上述文件目录结构为在中编写程序。完整专题：http://www.codefrom.com/p/Babel.js 上一篇已经介绍了编写babel.js插件所需要了解的基础知识，这篇我们就开始编写babe...

focusj 2019-08-21 10:35 评论0 收藏0