精华内容
参与话题
问答
  • Webpack常用插件总结

    千次阅读 2019-02-28 11:33:13
    刚完成一个基于React+Webpack的项目,渐渐地熟悉了Webpack的一些配置,开发过程中用到了不少Webpack插件,现在把觉得有用的Webpack插件总结一下当巩固学习啦,主要涉及热模块替换[Hot Module Replacement]、...

    刚完成一个基于React+Webpack的项目,渐渐地熟悉了Webpack的一些配置,开发过程中用到了不少Webpack插件,现在把觉得有用的Webpack插件总结一下当巩固学习啦,主要涉及热模块替换[Hot Module Replacement]、ProvidePlugin、CommonsChunkPlugin、UglifyJsPlugin 、ExtractTextWebpackPlugin、DefinePlugin、DllPlugin等。

    1、热模块替换Hot Module Replacement

    热模块替换(HMR)是webpack提供的最有用的特性之一,热模块替换可以让模块在没有页面刷新的情况下实时更新代码改动结果;

    安装webpack-dev-server

    webpack-dev-server 是一个小型的Node.js Express服务器,它通过使用webpack-dev-middleware来为webpack打包的资源文件提供服务。可以认为webpack-dev-server就是一个拥有实时重载能力的静态资源服务器(建议只在开发环境使用)
    通过npm安装:

    npm install webpack-dev-server --save-dev```
    运行
    

    webpack-dev-server --open

    /*
     热更新授权
    一个简单webpackHMR实例,这里感觉官方代码比较简单明了,直接复制过来啦
    */
    const path = require('path');
    const webpack = require('webpack');
    
    module.exports = {
      entry: './index.js',
    
      plugins: [
        new webpack.HotModuleReplacementPlugin() // Enable HMR
      ],
    
      output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/'
      },
    
      devServer: {
        hot: true, // Tell the dev-server we're using HMR
        contentBase: resolve(__dirname, 'dist'),
        publicPath: '/'
      }
    };
    

    上述代码配置中需要注意两个地方:
    (1)plugins:添加webpack.HotModuleReplacementPlugin模块热更新插件
    (2)devServer配置hot:true 开启模块热更新配置,更多配置详见devServer
    同时还需注意的几个devServer配置属性

    inline: true|false
    

    inline属性用于切换webpack-der-server编译并刷新浏览器的两种不同模式:
    (1)第一种也是默认的inline模式,这种模式是将脚本插入打包资源文件中复制热更新,并在浏览器控制台中输出过程信息,访问格式访问格式是http://:/
    (2)iframe 模式:使用iframe加载页面,访问格式http://:/webpack-dev-server/
    可以通过配置

    inline: false//启用iframe
    

    在这里插入图片描述
    官方还是推荐使用inline模式


    在你的代码中插入热替换代码
    index.js 在入口文件结尾处插入

    if (module.hot) {
        module.hot.accept();
    }
    

    只有被 "accept"的代码模块才会被热更新,所以你需要在父节点或者父节点的父节点… module.hot.accept 调用模块。如以上代码所示,在入口文件加入 module.hot.accept之后在入口文件引用的任何子模块更新都会触发热更新。模块更新完成,浏览器会输出类型以下信息

    在这里插入图片描述
    也可以像官方提供的实例一样accept特定的模块,如下实例,当’./library’有任何更新是都会触发热模块更新
    import Lib from ‘./library’;

    if (module.hot) {
      module.hot.accept('./library', function() {
        console.log('Accepting the updated library module!');
        Library.log();
      })
    }
    
    更多Hot Module Replacement资料参考

    Hot Module Replacement
    hot module replacement with webpack
    webpack 热加载你站住,我对你好奇很久了


    2、ProvidePlugin

    ProvidePlugin 可以在任何地方自动加载模块而不需要import 或 require 方法:
    例如:通过如下定义,在任何代码中使用identifier变量,'module1’模块都会被加载,identifier所代表的正式‘module1’模块export的内容

    new webpack.ProvidePlugin({
      identifier: 'module1',
      // ...
    })
    

    用途

    (1)全局变量

    如果你的项目里需要使用jQuery,如果每次使用的时候都需要通过import 或 require 去引入jQuery的话未免也太麻烦。这时候ProvidePlugin就可以帮上大忙了

    //Webpack plugins定义
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
    
    // 代码模块中调用
    $('#item'); // <= 生效
    jQuery('#item'); // <= just works
    // $ is automatically set to the exports of module "jquery"
    

    上述代码可以看出通过ProvidePlugin定义的‘webpack&quot;jquery&quot;’被调用时是直接生效的,webpack会自动把&quot;jquery&quot;给注入进模块,而‘’在模块中则代表了‘jquery’ export的内容。这样就不需要先let $=require(‘jquery’)再调用啦。

    (2)ProvidePlugin还可以根据不同环境使用不同配置

    在实际的项目开发中我们通常会根据不同环境采用不同的webpack配置文件,如下代码使用了三个不同文件代表了不同环境的配置,development.js、test.js、production.js分别代表了开发、测试、线上环境它们都输出了一个包含name属性的对象:

    //development.js开发
    module.exports = {
        name:'development'
    };
    //test.js测试
    module.exports = {
        name:'test'
    };
    
    //production.js线上
    module.exports = {
        name:'production'
    };
    
    //webpack.dev.config.js 开发环境
        new webpack.ProvidePlugin({
                ENV: 'development'
            })
    //webpack.test.config.js 测试环境
    new webpack.ProvidePlugin({
                ENV: "test"
            })
    //webpack.pub.config.js 线上环境
        new webpack.ProvidePlugin({
                ENV: "production"
            })
    

    假如在代码模块中这么调用

    if (ENV.name == ‘development’) {
    console.log(‘做一些开发环境的事情’)
    } else if (ENV.name == ‘test’) {
    console.log(‘做一些测试环境的事情’)
    } else if (ENV.name == ‘production’) {
    console.log(‘有些事情必须留到线上环境做’)
    }

    如上ProvidePlugin中定义的ENV在不同环境中就代表了不同模块,这样就可以区别的做一些开发、测试、生产环境不同的事情啦。

    更多ProvidePlugin资料参考

    ProvidePlugin
    webpack 巧解环境配置问题


    3、CommonsChunkPlugin

    CommonsChunkPlugin是一个可以用来提取公共模块的插件,配置:

    {
      name: string, // or
      names: string[],
      // 这是 common chunk 的名称。已经存在的 chunk 可以通过传入一个已存在的 chunk 名称而被选择。
      // 如果一个字符串数组被传入,这相当于插件针对每个 chunk 名被多次调用
      // 如果该选项被忽略,同时 `options.async` 或者 `options.children` 被设置,所有的 chunk 都会被使用,否则 `options.filename` 会用于作为 chunk 名。
    
      filename: string,
      // common chunk 的文件名模板。可以包含与 `output.filename` 相同的占位符。
      // 如果被忽略,原本的文件名不会被修改(通常是 `output.filename` 或者 `output.chunkFilename`)
    
      minChunks: number|Infinity|function(module, count) -> boolean,
      // 在传入  公共chunk(commons chunk) 之前所需要包含的最少数量的 chunks 。
      // 数量必须大于等于2,或者少于等于 chunks的数量
      // 传入 `Infinity` 会马上生成 公共chunk,但里面没有模块。
      // 你可以传入一个 `function` ,以添加定制的逻辑(默认是 chunk 的数量)
    
      chunks: string[],
      // 通过 chunk name 去选择 chunks 的来源。chunk 必须是  公共chunk 的子模块。
      // 如果被忽略,所有的,所有的 入口chunk (entry chunk) 都会被选择。
    
    
      children: boolean,
      // 如果设置为 `true`,所有  公共chunk 的子模块都会被选择
    
      async: boolean|string,
      // 如果设置为 `true`,一个异步的  公共chunk 会作为 `options.name` 的子模块,和 `options.chunks` 的兄弟模块被创建。
      // 它会与 `options.chunks` 并行被加载。可以通过提供想要的字符串,而不是 `true` 来对输出的文件进行更换名称。
    
      minSize: number,
      // 在 公共chunk 被创建立之前,所有 公共模块 (common module) 的最少大小。
    }
    

    webpack用插件CommonsChunkPlugin进行打包的时候,将符合引用次数(minChunks)的模块打包到name参数的数组的第一个块里(chunk),然后数组后面的块依次打包(查找entry里的key,没有找到相关的key就生成一个空的块),最后一个块包含webpack生成的在浏览器上使用各个块的加载代码,所以页面上使用的时候最后一个块必须最先加载。
    打包公共文件

    new webpack.optimize.CommonsChunkPlugin({
      name: "commons",
      // ( 公共chunk(commnons chunk) 的名称)
    
      filename: "commons.js",
      // ( 公共chunk 的文件名)
    
      // minChunks: 3,
      // (模块必须被3个 入口chunk 共享)
    
      // chunks: ["pageA", "pageB"],
      // (只使用这些 入口chunk)
    })
    

    配置例子:
    文件目录结构
    在这里插入图片描述

    //main.js
    import A from './a'
    
    //main1.js
    import A from './a'
    import B from './b'
    
    //a.js
    var A = 1;
    exports.A = A;
    
    //b.js
    var B = 1;
    exports.B = B;
    
    //lib/jquery.js
    var Jquery = 'fake jquery';
    exports.$ = Jquery;
    
    //lib/vue.js
    var Vue = 'Fake Vue';
    exports.Vue = Vue;
    
    //package.json
    {
      "name": "CommonsChunkPluginExample",
      "version": "1.0.0",
      "main": "main.js",
      "license": "MIT",
      "scripts": {
        "start": "webpack  --config webpack.dev.config.js "
      },
      "dependencies": {
        "webpack": "^2.6.1"
      }
    }
    

    实例代码,以上main.js、main1.js为入口文件;a.js、b.js为代码模块文件;lib/jquery.js、lib/vue.js模拟代码库文件

    打包main.js、main1.js的的公共模块

    var path = require('path')
    var webpack = require('webpack')
    
    module.exports = {
      entry: {
        main: './main.js',
        main1: './main1.js',
     },
      output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js',
        chunkFilename: '[name].js',
      },
      resolve: {
        extensions: [' ', '*', '.js', '.jsx'],
      },
      plugins: [
        new webpack.optimize.CommonsChunkPlugin({
          name: 'commons'
        }),
        new webpack.optimize.CommonsChunkPlugin({
          name: 'load'
        })
    
      ],
    }
    

    按照预期
    main.js、main1.js都引用了a.js,所以a.js被打包进commons.js中;b.js只被main1.js引用,将会被打包进main1.js中;打包生成的/dist/load.js包含了Webpack的加载代码:

    在这里插入图片描述

    ///dist/commons.js
    webpackJsonp([2],[
    /* 0 */
    /***/ (function(module, exports) {
    
    /**
     * Created by thea on 2017/6/9.
     */
    var A = 1;
    exports.A = A;
    
    /***/ })
    ]);
    
    //dist/main1.js
    
    webpackJsonp([0],[
    /* 0 */,
    /* 1 */
    /***/ (function(module, exports) {
    
    var B = 1;
    exports.B = B;
    
    /***/ }),
    /* 2 */,
    /* 3 */
    /***/ (function(module, __webpack_exports__, __webpack_require__) {
    
    "use strict";
    Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
    /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__a__ = __webpack_require__(0);
    /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__a___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__a__);
    /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__b__ = __webpack_require__(1);
    /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__b___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__b__);
    
    /***/ })
    ],[3]);
    

    提取第三方库

    在通常的项目开发中我们通常会引入一些第三方库,在打包的时候我们通常也会希望将代码拆分成公共代码和应用代码。将webpack.dev.config.js文件配置变化如下:

    //webpack.dev.config.js
    var path = require('path')
    var webpack = require('webpack')
    
    module.exports = {
      entry: {
        main: './main.js',
        main1: './main1.js',
        lib:['./lib/jquery.js','./lib/vue.js']//第三方库
      },
      output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js',
        chunkFilename: '[name].js',
      },
      resolve: {
        extensions: [' ', '*', '.js', '.jsx'],
      },
      plugins: [
        new webpack.optimize.CommonsChunkPlugin({
          names:['commons','lib']//'lib'提取入口entry key 'lib'代表的文件单独打包
        }),
        new webpack.optimize.CommonsChunkPlugin({
          name: 'load'
        })
      ],
    }
    

    预期/lib/jquery.js、/lib/vue.js共同打包成为/dist/lib.js

    在这里插入图片描述

    ///dist/lib.js
    webpackJsonp([0],[
    /* 0 */,
    /* 1 */,
    /* 2 */
    /***/ (function(module, exports) {
    
    var Jquery = 'fake jquery';
    exports.$ = Jquery;
    
    /***/ }),
    /* 3 */
    /***/ (function(module, exports) {
    
    var Vue = 'Fake Vue';
    exports.Vue = Vue;
    
    /***/ }),
    /* 4 */,
    /* 5 */,
    /* 6 */
    /***/ (function(module, exports, __webpack_require__) {
    
    __webpack_require__(2);
    module.exports = __webpack_require__(3);
    
    
    /***/ })
    ],[6]);
    

    CommonsChunkPlugin更多资料参考

    CommonsChunkPlugin
    webpack CommonsChunkPlugin详细教程


    4、ExtractTextWebpackPlugin 分离 CSS

    Webpack打包默认会把css和js打包在一块,然而我们通常习惯将css代码中放在标签中,而将js引用放在页面底部;将css代码放在页面头部可以避免 FOUC 问题(表现为页面内容已经加载出来,但是没有样式,过了一会儿样式文件加载出来之后页面回复正常);同时如果css和js分离也有利于这加强样式的可缓存性;这是我们需要ExtractTextWebpackPlugin来分离js与css使得样式文件单独打包。

    webpack处理css

    在代码中想JavaScript模块一样引入css文件
    import styles from ‘./style.css’

    需要借助css-loader
    和 style-loader

    npm install --save-dev css-loader style-loader
    

    在 webpack.config.js 中配置如下:

    module.exports = {
        module: {
            rules: [{
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }]
        }
    }
    

    这样,CSS 会跟你的 JavaScript 打包在一起,并且在初始加载后,通过一个

    使用 ExtractTextWebpackPlugin

    安装

    npm install --save-dev extract-text-webpack-plugin
    

    为了使用这个插件,它需要通过三步被配置到 webpack.config.js 文件中。

    var ExtractTextPlugin = require('extract-text-webpack-plugin');
    module.exports = {
        module: {
             rules: [{
                 test: /\.css$/,
                use: ExtractTextPlugin.extract({
                         fallback: 'style-loader',
                        use: [
                            {
                                loader: 'css-loader',
                                options: {
                                    sourceMap: true,
                                    importLoaders: 1,
                                    modules: true,
                                    localIdentName: "[local]---[hash:base64:5]",
                                    camelCase: true
                                }
                            }]
                })
             }]
         },
        plugins: [
            new ExtractTextPlugin( ({
                filename: '[name].css',//使用模块名命名
                allChunks: true
            })
        ]
    }
    

    通过加入ExtractTextWebpackPlugin,每个模块的css都会生成一个新文件,此时你可以作为一个单独标签添加到html文件中。

    更多ExtractTextWebpackPlugin资料参考

    webpack-contrib/extract-text-webpack-plugin
    webpack ExtractTextWebpackPlugin


    5、UglifyJsPlugin代码压缩输出

    代码压缩插件UglifyJsPlugin通过UglifyJS2来完成代码压缩,配置参考UglifyJS2,
    调用例子:

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

    ##6、设置全局变量插件
    DefinePlugin

    // webpack.config.js
    const webpack = require('webpack');
    
    module.exports = {
      /*...*/
      plugins:[
        new webpack.DefinePlugin({
          'process.env.NODE_ENV': JSON.stringify('production')
        })
      ]
    };
    

    通过DefinePlugin定义的变量可在全局代码中使用,例如Webpack配置文件定义了process.env.NODE_ENV=‘production’,如果代码中存在如下调用:

    if (process.env.NODE_ENV !== 'production') console.log('...') 
    

    即等同于

    if (false) console.log('...')
    

    原理:DefinePlugin做的工作是在源代码基础上执行的全局查找替换工作,将DefinePlugin插件中定义的变量替换为插件中定义的变量值。
    参考
    DefinePlugin


    DllPlugin& DllReferencePlugin

    在前端项目构建中,为了提高打包效率,往往会将业务代码合第三方库打包。
    之前有将将到过CommonsChunkPlugin可提供第三方库单独打包方法。但是由于每次运行Webpack,即使没有代码更新,也会重新打包,Webpack打包慢也是一直被诟病的问题,竟然减少打包内容才是王道;
    其实Webpack还提供了一个提供了另外一个配置项Externals,提供了「从输出的 bundle 中排除依赖」的方法:

    index.html
    ...
    <script src="https://code.jquery.com/jquery-3.1.0.js"
      integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
      crossorigin="anonymous"></script>
    ...
    
    webpack.config.js
    externals: {
      jquery: 'jQuery'
    }
    

    这样就剥离了那些不需要改动的依赖模块,换句话,下面展示的代码还可以正常运行:

    import $ from 'jquery';
    
    $('.my-element').animate(...);
    

    不过externals虽然解决了外部引用问题,但如果遇到像react模块本身引入react入口文件,但是 Webpack 不知道这个入口文件等效于 react 模块本身时,会出现重复打包现象,详见彻底解决 Webpack 打包性能问题。
    Webpack提供了DllPlugin、DllReferencePlugin两个插件,既能解决第三方库代码无变化仍然要打包增加打包时间问题,也能解决通过外链引用但可能第三方库还是被打包进来的问题。
    DllPlugin插件用来把需要独立打包的第三方库分离出来单独打包最后会输出两个文件,一个是打包好的第三方库bundle还有一个是用来给 DllReferencePlugin
    映射依赖的manifest.json
    使用方法:
    (1)新建一个专门用来打包第三方库的Webpack配置文件

    //webpack.dll.config.js
    const webpack = require('webpack');
    module.exports = {
        entry: {
            react: ['./res/polyfill.js', 'react', 'react-dom', 'redux', 'react-redux', 'react-router']
        },
        output: {
              filename: '[name].bundle.js',
            path: path.join(__dirname, 'res'),
            library: '[name]_lib'
        },
        plugins: [
            new webpack.DllPlugin({
                path: '.res/[name]-manifest.json',//manifest.json输出路径,DllReferencePlugin需要用到
    
                name: '[name]_library',//打包库文件名
               context:__dirname//可选,引用manifest.json的上下文,默认为Webpack配置文件上下文
            })
        ]
    };
    

    运行webpack.dll.config.js

    webpack --config webpack.dll.config.js
    

    生成打包好的库bundle,和manifest.json文件 ‘bundle.manifest.json’,大致内容如下:

    {
     "name": "react_lib",
      "content": {
        "./node_modules/core-js/modules/_export.js": {
          "id": 0,
          "meta": {}
        },
        "./node_modules/core-js/modules/_global.js": {
          "id": 1,
          "meta": {}
        },
        "./node_modules/preact-compat/dist/preact-compat.es.js": {
          "id": 2,
          "meta": {
            "harmonyModule": true
          },
    //其他引用
    }
    

    2、配置webpack.config.js中的插件DllReferencePlugin

     plugins: [
            new webpack.DllReferencePlugin({
                context: '.',//需要与webpack.dll.config.js中DllPlugin上下文一致
                manifest: require('./res/react-manifest.json')//DllPlugin输出的manifest.json文件
            })]
    

    通过两步完美分离第三方库~~~~

    DllPlugin&DllReferencePlugin资料

    DllPlugin
    彻底解决 Webpack 打包性能问题
    webpack dllPlugin 使用


    转自:清晓凝露 链接:https://www.jianshu.com/p/08859e5651fc 来源:简书

    展开全文
  • webpack插件

    2020-01-06 19:27:48
    add-asset-html-webpack-plugin 将JavaScript或CSS资产添加到生成的HTML中 html-webpack-plugin ...该软件包允许使用Babel和webpack转换JavaScript文件。 babel-plugin-syntax-dynamic-impor 语法动态导入 babel-p...

    devDependencies 开发环境

    add-asset-html-webpack-plugin

    将JavaScript或CSS资产添加到生成的HTML中 html-webpack-plugin

    babel-core

    Babel编译器核心。

    babel-loader

    该软件包允许使用Babelwebpack转换JavaScript文件。

    babel-plugin-syntax-dynamic-impor

    语法动态导入

    babel-preset-env

    通过根据目标浏览器或运行时环境自动确定所需的Babel插件和polyfill, Babel预设可将ES2015 +编译为ES5。

    babel-preset-es2015 该软件包已被弃用

    所有es2015插件的Babel预设。

    copy-webpack-plugin

    将单个文件或整个目录(已存在)复制到构建目录

    css-loader

    CSS加载器

    ejs-loader

    用于webpack的 EJS(Underscore / LoDash模板)加载程序。使用lodash模板函数来编译模板。

    file-loader

    将文件上的/ file-loader解析为url,然后将文件发送到输出目录。import``require()

    gulp

    自动化 -gulp是一个工具包,可帮助您自动化开发工作流程中繁重或耗时的任务。

    html-webpack-plugin

    是一个webpack插件,可简化HTML文件的创建以服务您的webpack捆绑软件

    mini-css-extract-plugin

    该插件将CSS提取到单独的文件中。它为每个包含CSS的JS文件创建一个CSS文件。它支持CSS和SourceMap的按需加载。

    minimist 解析

    解析参数选项

    这个模块是乐观主义者的论点分析器的精髓,没有任何奇特的修饰

    style-loader 样式

    样式加载器

    url-loader 网址加载器

    Webpack的加载程序,它将文件转换为base64 URI。

    webpack webpack

    webpack是一个模块捆绑器。它的主要目的是捆绑JavaScript文件以供在浏览器中使用,但它也能够转换,捆绑或打包几乎任何资源或资产。

    webpack-bundle-analyzer Webpack捆绑分析器

    使用交互式可缩放树图可视化webpack输出文件的大小。

    webpack-cli webpack 脚手架

    webpack CLI提供了一组灵活的命令,供开发人员在设置自定义webpack项目时提高速度。从webpack v4开始,webpack不再需要配置文件,但是开发人员经常希望根据其用例和需求创建更自定义的webpack配置。webpack CLI通过提供一组工具来改善自定义Webpack配置的设置,从而满足了这些需求。

    webpack-merge 为Webpack设计的合并

    webpack-merge提供了merge连接数组并合并对象以创建新对象的功能。如果遇到函数,它将执行它们,通过算法运行结果,然后将返回的值再次包装在函数中。

    dependencies 生产环境

    展开全文
  • 以下是常用插件列表 1.happypack 2.dllplugin 3.commons-chunk-plugin 4.webpack-dev-server 5.webpack-dev-middleware 6.webpack-hot-middleware(HMR) 7.webpack-hot-server-middleware 8.http-proxy-middleware ...

    以下是常用插件列表

    1.happypack
    2.dllplugin
    3.commons-chunk-plugin
    4.webpack-dev-server
    5.webpack-dev-middleware
    6.webpack-hot-middleware(HMR)
    7.webpack-hot-server-middleware
    8.http-proxy-middleware
    9.html-webpack-plugin
    10.extract-text-webpack-plugin
    11.optimize-css-assets-webpack-plugin
    12.uglifyjs-webpack-plugin
    13.imagemin-webapack-plugin
    14.copy-webpack-plugin

    加快构建速度类

    happyPack

    happyPack能使得webpack进行node多线程构建项目,从而提高构建速度,以下是一个栗子:

    const os = require('os')
    const HappyPack  = require('happypack')
    const happThreadPool = HappyPack.ThreadPool({size: os.cpus().length}) // 采用多进程,进程数由CPU核数决定
    
    plugins:[
        new HappyPack({
            id: 'js',
            cache: true,
            loaders: ['babel-loader?cacheDirectory=true'],
            threadPool: happThreadPool
        }),
    ]
    

    DLLPlugin

    DLL字面意思了解一下

    DLL(Dynamic Link Library)文件为动态链接库文件,又称“应用程序拓展”,是软件文件类型。 在Windows中,许多应用程序并不是一个完整的可执行文件,它们被分割成一些相对独立的动态链接库,即DLL文件,放置于系统中。 当我们执行某一个程序时,相应的DLL文件就会被调用

    我们在项目中一定会引入不少第三方的库,例如一些框架啊工具啊啥的,我们一般来说不会去改动这些文件,所以我们期盼的效果是在不改动这些库文件的情况下,打包一次就够了。这时有个牛逼的插件出现了——DLLPlugin。
    DLLPlugin和DllReferencePlugin需要结合一起使用,首先需要独立建一个配置文件。
    webpack.dll.conf.js

    {
        entry: {
            vendor: [
                "vue",
                "vue-router",
                "vuex"
            ]
        },
        output: {
            path: path.join(__dirname, '../static/'), // 输出的路径
            filename: '[name].dll.js', // 输出的文件,将会根据entry命名为vendor.dll.js
            library: '[name]_library' // 暴露出的全局变量名
        },
        plugins: [
            new webpack.DllPlugin({
            path: path.join(__dirname, '../static/', '[name]-mainfest.json'), // 描述依赖对应关系的json文件
            name: '[name]_library', 
            context: __dirname // 执行的上下文环境,对之后DllReferencePlugin有用
            })
        ]
    }
    

    这会生成一个manifest.json文件,存储各个模块与库文件的对应关系,然后在原配置文件中加上DllReferencePlugin

    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('../static/vendor-mainfest.json') // 指向这个json
        })
    ]
    

    最后运行以下命令行将库文件打包好

    webpack --config ./build/webpack.dll.conf.js
    

    再打包我们原先的业务代码,大功告成~!

    commons-chunk-plugin

    commons-chunk-plugin的作用是用来提取项目中公共依赖模块到一个新的chunk,一般用于抽离类库node_modules。

    协助开发类

    webpack-dev-middleware

    在webpack-cli中我们会启动开发模式webpack --wactch来观察代码的改动从而进行重新构建。类似的,webpack-dev-middleware起了一个中间件的作用,用它输出的文件会存在内存里,构建速度相当快,所以可以利用它配合服务器(如express)作为静态资源服务器(本地)用于开发。

    webpack-dev-server

    webpack-dev-server大家可能会比较熟悉,它本身就是一个express服务器,它就是封装了webpack-dev-middleware,还可以用到下面将会提及的HMR。

    webpack-hot-middleware(HMR)

    webpack-hot-middleware结合了webpack-dev-middleware,实现了浏览器无刷新更新

    webpack-hot-server-middleware

    emmmm就是webpack-hot-middleware和webpack-dev-middleware的结合版,我也只是听说。。并没有用过。

    http-proxy-middleware

    认识到这个插件的缘由是我在vue-cli(webpack模式)中进行本地开发时遇到了跨域问题,后来是使用到proxyTable来解决了这个问题。

    在更进一步的了解得知proxyTable是作为http-proxy-middleware插件的配置选项,在express服务器中作为接口代理的功能。

    构建基础类

    html-webpack-plugin

    这个插件大多读者都应该很熟悉,它会用于生成一个html文件,并将最终生成的js,css以及一些静态资源文件以script和link的形式动态插入其中。你可以自定义这个html也可以让插件生成一个新的html。

    对于多页面应用,可以通过配置多个html-webpack-plugin生成多个html文件。
    const glob = require(‘glob’)

    function htmlWebpackConfigs () {
        var configs = []
        glob.sync('./src/apps/**/*.html').forEach(htmlPath => {
            const chunk = htmlPath.split('./src/apps/')[1].split('/index.html')[0]
            const filename = chunk + '.html'
            const htmlConf = {
              filename: filename,
              template: htmlPath,
              chunks: ['vendors', chunk]
            }
            configs.push(new HtmlWebpackPlugin(htmlConf))
        })
        return configs
    }
    
    module.exports = {
        plugins: [
            ...htmlWebpackConfigs()
        ]
    }
    

    copy-webpack-plugin

    顾名思义,对资源进行拷贝,例如一些静态资源直接拷贝到打包后的文件夹中。

    new CopyWebpackPlugin([
            {
                from :'html',
                to:'html'
            },
            {
                context: 'global/img',
                from: '**/*',
                to:'img/common'
            },
            {
                from: 'img',
                to:'img'
            },
            {
                from :'global/lib/es5-shim-sham.js'
            }
    ])
    

    优化压缩类

    extract-text-webpack-plugin

    extract-text-webpack-plugin会将你项目中的css都单独打包,不会内嵌到js bunlde中,这样css和js即可并行加载,而代价就是额外的http请求。

    module: {
        rules: [
          {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
          }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'css/[name].[contenthash].css'
        })
    ]
    

    optimize-css-assets-webpack-plugin

    optimize-css-assets-webpack-plugin对css文件进行优化和最小化操作
    plugins: [
        new OptimizeCssAssetsPlugin({
          assetNameRegExp: /\.optimize\.css$/g,
          cssProcessor: require('cssnano'),
          cssProcessorOptions: { safe: true, discardComments: { removeAll: true } },
          canPrint: true
        })
    ]
    

    uglifyjs-webpack-plugin

    uglifyjs-webpack-plugin对js文件进行压缩并且结合tree shaking删除未引用代码

    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
                drop_console: true
            },
            sourceMap: true
        })
    ]
    

    imagemin-webapack-plugin

    imagemin-webapack-plugin顾名思义就是对项目中的图片进行压缩~

    plugins: [
        new ImageminPlugin({
            test: /\.(jpe?g|png|gif|svg)$/i,
            disable: process.env.NODE_ENV !== 'production', // Disable during development
            pngquant: {
                quality: '90-100'
            },
            gifsicle: {
                optimizationLevel: 2,
                interlaced: true
            },
            optipng: {
                optimizationLevel: 4,
            },
            jpegtran: {
                progressive: true
            }
        }),
    ]
    
    展开全文
  • 何为插件(Plugin)?专注处理 webpack 在编译过程中的某个特定的任务的功能模块,可以称为插件。Plugin 是一个扩展器,它丰富了 webpack 本身,针对是 loader...

    何为插件(Plugin)?专注处理 webpack 在编译过程中的某个特定的任务的功能模块,可以称为插件。

    Plugin 是一个扩展器,它丰富了 webpack 本身,针对是 loader 结束后,webpack 打包的整个过程,它并不直接操作文件,而是基于事件机制工作,会监听 webpack 打包过程中的某些节点,执行广泛的任务。

    Plugin 的特点

    • 是一个独立的模块

    • 模块对外暴露一个 js 函数

    • 函数的原型 (prototype) 上定义了一个注入 compiler 对象的 apply方法 apply 函数中需要有通过 compiler 对象挂载的 webpack 事件钩子,钩子的回调中能拿到当前编译的 compilation 对象,如果是异步编译插件的话可以拿到回调 callback

    • 完成自定义子编译流程并处理 complition 对象的内部数据

    • 如果异步编译插件的话,数据处理完成后执行 callback 回调。

    下面介绍 18 个常用的 webpack 插件。

    本文在gitthub做了收录:github.com/Michael-lzg…

    HotModuleReplacementPlugin

    模块热更新插件。Hot-Module-Replacement 的热更新是依赖于 webpack-dev-server,后者是在打包文件改变时更新打包文件或者 reload 刷新整个页面,HRM 是只更新修改的部分。

    HotModuleReplacementPluginwebpack模块自带的,所以引入webpack后,在plugins配置项中直接使用即可。

    const webpack = require('webpack')
    
    plugins: [
      new webpack.HotModuleReplacementPlugin(), // 热更新插件
    ]
    

    html-webpack-plugin

    生成 html 文件。将 webpack 中entry配置的相关入口 chunkextract-text-webpack-plugin抽取的 css 样式 插入到该插件提供的template或者templateContent配置项指定的内容基础上生成一个 html 文件,具体插入方式是将样式link插入到head元素中,script插入到head或者body中。

    const HtmlWebpackPlugin = require('html-webpack-plugin')
    
    plugins: [
      new HtmlWebpackPlugin({
        filename: 'index.html',
        template: path.join(__dirname, '/index.html'),
        minify: {
          // 压缩HTML文件
          removeComments: true, // 移除HTML中的注释
          collapseWhitespace: true, // 删除空白符与换行符
          minifyCSS: true, // 压缩内联css
        },
        inject: true,
      }),
    ]
    

    inject 有四个选项值

    • true:默认值,script 标签位于 html 文件的 body 底部

    • body:script 标签位于 html 文件的 body 底部(同 true)

    • head:script 标签位于 head 标签内

    • false:不插入生成的 js 文件,只是单纯的生成一个 html 文件

    多页应用打包

    有时,我们的应用不一定是一个单页应用,而是一个多页应用,那么如何使用 webpack 进行打包呢。

    const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    module.exports = {
      entry: {
        index: './src/index.js',
        login: './src/login.js',
      },
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[hash:6].js',
      },
      //...
      plugins: [
        new HtmlWebpackPlugin({
          template: './public/index.html',
          filename: 'index.html', //打包后的文件名
        }),
        new HtmlWebpackPlugin({
          template: './public/login.html',
          filename: 'login.html', //打包后的文件名
        }),
      ],
    }
    

    如果需要配置多个 HtmlWebpackPlugin,那么 filename 字段不可缺省,否则默认生成的都是 index.html

    但是有个问题,index.htmllogin.html 会发现,都同时引入了 index.f7d21a.jslogin.f7d21a.js,通常这不是我们想要的,我们希望 index.html 中只引入 index.f7d21a.jslogin.html 只引入 login.f7d21a.js

    HtmlWebpackPlugin 提供了一个 chunks 的参数,可以接受一个数组,配置此参数仅会将数组中指定的 js 引入到 html 文件中

    module.exports = {
      //...
      plugins: [
        new HtmlWebpackPlugin({
          template: './public/index.html',
          filename: 'index.html', //打包后的文件名
          chunks: ['index'],
        }),
        new HtmlWebpackPlugin({
          template: './public/login.html',
          filename: 'login.html', //打包后的文件名
          chunks: ['login'],
        }),
      ],
    }
    

    这样执行 npm run build,可以看到 index.html 中仅引入了 index 的 js 文件,而 login.html 中也仅引入了 login 的 js 文件。

    clean-webpack-plugin

    clean-webpack-plugin 用于在打包前清理上一次项目生成的 bundle 文件,它会根据 output.path 自动清理文件夹;这个插件在生产环境用的频率非常高,因为生产环境经常会通过 hash 生成很多 bundle 文件,如果不进行清理的话每次都会生成新的,导致文件夹非常庞大。

    const { CleanWebpackPlugin } = require('clean-webpack-plugin')
    
    plugins: [
      new HtmlWebpackPlugin({
        template: path.join(__dirname, '/index.html'),
      }),
      new CleanWebpackPlugin(), // 所要清理的文件夹名称
    ]
    

    extract-text-webpack-plugin

    将 css 成生文件,而非内联 。该插件的主要是为了抽离 css 样式,防止将样式打包在 js 中引起页面样式加载错乱的现象

    const ExtractTextPlugin = require('extract-text-webpack-plugin')
    
    plugins: [
      // 将css分离到/dist文件夹下的css文件夹中的index.css
      new ExtractTextPlugin('css/index.css'),
    ]
    

    mini-css-extract-plugin

    将 CSS 提取为独立的文件的插件,对每个包含 css 的 js 文件都会创建一个 CSS 文件,支持按需加载 css 和 sourceMap。只能用在 webpack4 中,对比另一个插件 extract-text-webpack-plugin 有以下特点:

    • 异步加载

    • 不重复编译,性能更好

    • 更容易使用

    • 只针对 CSS

    这个插件应该只用在生产环境配置,并且在 loaders 链中不使用 style-loader, 而且这个插件暂时不支持 HMR

    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    
    module.exports = {
      module: {
        rules: [
          {
            test: /\.(le|c)ss$/,
            use: [
              {
                loader: MiniCssExtractPlugin.loader,
                options: {
                  publicPath: '../',
                },
              },
              'css-loader',
              'postcss-loader',
              'less-loader',
            ],
          },
        ],
      },
      plugins: [
        new MiniCssExtractPlugin({
          filename: 'css/[name].[contenthash:8].css',
          chunkFilename: 'css/[id].[contenthash:8].css',
        }),
      ],
    }
    

    purifycss-webpack

    有时候我们 css 写得多了或者重复了,这就造成了多余的代码,我们希望在生产环境进行去除。

    const path = require('path')
    const PurifyCssWebpack = require('purifycss-webpack') // 引入PurifyCssWebpack插件
    const glob = require('glob') // 引入glob模块,用于扫描全部html文件中所引用的css
    
    module.exports = merge(common, {
      plugins: [
        new PurifyCssWebpack({
          paths: glob.sync(path.join(__dirname, 'src/*.html')),
        }),
      ],
    })
    

    optimize-css-assets-webpack-plugin

    我们希望减小 css 打包后的体积,可以用到 optimize-css-assets-webpack-plugin

    const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin") // 压缩css代码
    
    optimization: {
      minimizer: [
        // 压缩css
        new OptimizeCSSAssetsPlugin({})
      ]
     }
    

    UglifyJsPlugin

    uglifyJsPluginvue-cli 默认使用的压缩代码方式,用来对 js 文件进行压缩,从而减小 js 文件的大小,加速 load 速度。它使用的是单线程压缩代码,打包时间较慢,所以可以在开发环境将其关闭,生产环境部署时再把它打开。

    const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
    
    plugins: [
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            warnings: false
          }
        },
        sourceMap: true,  //是否启用文件缓存
        parallel: true   //使用多进程并行运行来提高构建速度
      })
    

    ParallelUglifyPlugin

    开启多个子进程,把对多个文件压缩的工作分别给多个子进程去完成,每个子进程其实还是通过 UglifyJS 去压缩代码,但是变成了并行执行。

    const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
    
    plugins: [
      new ParallelUglifyPlugin({
        //cacheDir 用于配置缓存存放的目录路径。
        cacheDir: '.cache/',
        sourceMap: true,
        uglifyJS: {
          output: {
            comments: false,
          },
          compress: {
            warnings: false,
          },
        },
      }),
    ]
    

    terser-webpack-plugin

    Webpack4.0 默认是使用 terser-webpack-plugin 这个压缩插件,在此之前是使用 uglifyjs-webpack-plugin,两者的区别是后者对 ES6 的压缩不是很好,同时我们可以开启 parallel 参数,使用多进程压缩,加快压缩。

    const TerserPlugin = require('terser-webpack-plugin') // 压缩js代码
    
    optimization: {
      minimizer: [
        new TerserPlugin({
          parallel: 4, // 开启几个进程来处理压缩,默认是 os.cpus().length - 1
          cache: true, // 是否缓存
          sourceMap: false,
        }),
      ]
    }
    

    NoErrorsPlugin

    报错但不退出 webpack 进程。编译出现错误时,使用 NoEmitOnErrorsPlugin 来跳过输出阶段。这样可以确保输出资源不会包含错误。

    plugins: [new webpack.NoEmitOnErrorsPlugin()]
    

    compression-webpack-plugin

    所有现代浏览器都支持 gzip 压缩,启用 gzip 压缩可大幅缩减传输资源大小,从而缩短资源下载时间,减少首次白屏时间,提升用户体验。

    gzip 对基于文本格式文件的压缩效果最好(如:CSS、JavaScript 和 HTML),在压缩较大文件时往往可实现高达 70-90% 的压缩率,对已经压缩过的资源(如:图片)进行 gzip 压缩处理,效果很不好。

    const CompressionPlugin = require('compression-webpack-plugin')
    
    plugins: [
      new CompressionPlugin({
        // gzip压缩配置
        test: /\.js$|\.html$|\.css/, // 匹配文件名
        threshold: 10240, // 对超过10kb的数据进行压缩
        deleteOriginalAssets: false, // 是否删除原文件
      }),
    ]
    

    当然,这个方法还需要后端配置支持。

    DefinePlugin

    我们可以通过 DefinePlugin 可以定义一些全局的变量,我们可以在模块当中直接使用这些变量,无需作任何声明,DefinePluginwebpack 自带的插件。

    plugins: [
      new webpack.DefinePlugin({
        DESCRIPTION: 'This Is The Test Text.',
      }),
    ]
    
    // 直接引用
    console.log(DESCRIPTION)
    

    ProvidePlugin

    自动加载模块。 任何时候,当 identifier 被当作未赋值的变量时, module 就会自动被加载,并且 identifier 会被这个 module 输出的内容所赋值。这是 webpack 自带的插件。

    module.exports = {
      resolve: {
        alias: {
          jquery: './lib/jquery',
        },
      },
      plugins: [
        //提供全局的变量,在模块中使用无需用require引入
        new webpack.ProvidePlugin({
          $: 'jquery',
          React: 'react',
        }),
      ],
    }
    

    DLLPlugin

    这是在一个额外的独立的 webpack 设置中创建一个只有 dll 的 bundle(dll-only-bundle)。 这个插件会生成一个名为 manifest.json 的文件,这个文件是用来让 DLLReferencePlugin 映射到相关的依赖上去的。

    「使用步骤如下」

    1、在 build 下创建 webpack.dll.config.js

    const path = require('path')
    const webpack = require('webpack')
    module.exports = {
      entry: {
        vendor: [
          'vue-router',
          'vuex',
          'vue/dist/vue.common.js',
          'vue/dist/vue.js',
          'vue-loader/lib/component-normalizer.js',
          'vue',
          'axios',
          'echarts',
        ],
      },
      output: {
        path: path.resolve('./dist'),
        filename: '[name].dll.js',
        library: '[name]_library',
      },
      plugins: [
        new webpack.DllPlugin({
          path: path.resolve('./dist', '[name]-manifest.json'),
          name: '[name]_library',
        }),
        // 建议加上代码压缩插件,否则dll包会比较大。
        new webpack.optimize.UglifyJsPlugin({
          compress: {
            warnings: false,
          },
        }),
      ],
    }
    

    2、在 webpack.prod.conf.js 的 plugin 后面加入配置

    new webpack.DllReferencePlugin({
      manifest: require('../dist/vendor-manifest.json'),
    })
    

    3、package.json文件中添加快捷命令(build:dll)

      "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "lint": "eslint --ext .js,.vue src",
        "build": "node build/build.js",
        "build:dll": "webpack --config build/webpack.dll.conf.js"
      }
    

    生产环境打包的时候先npm run build:dll命令会在打包目录下生成 vendor-manifest.json 文件与 vendor.dll.js 文件。然后npm run build生产其他文件。

    4、根目录下的入口 index.html 加入引用

    <script type="text/javascript" src="./vendor.dll.js"></script>
    

    HappyPack

    HappyPack 能让 webpack 把任务分解给多个子进程去并发的执行,子进程处理完后再把结果发送给主进程。要注意的是 HappyPackfile-loaderurl-loader 支持的不友好,所以不建议对该 loader 使用。

    1、HappyPack 插件安装

    npm i -D happypack
    

    2、webpack.base.conf.js 文件对 module.rules 进行配置

    module: {
      rules: [
        {
          test: /\.js$/,
          use: ['happypack/loader?id=babel'],
          include: [resolve('src'), resolve('test')],
          exclude: path.resolve(__dirname, 'node_modules'),
        },
        {
          test: /\.vue$/,
          use: ['happypack/loader?id=vue'],
        },
      ]
    }
    

    3、在生产环境 webpack.prod.conf.js 文件进行配置

    const HappyPack = require('happypack')
    // 构造出共享进程池,在进程池中包含5个子进程
    const HappyPackThreadPool = HappyPack.ThreadPool({ size: 5 })
    plugins: [
      new HappyPack({
        // 用唯一的标识符id,来代表当前的HappyPack是用来处理一类特定的文件
        id: 'babel',
        // 如何处理.js文件,用法和Loader配置中一样
        loaders: ['babel-loader?cacheDirectory'],
        threadPool: HappyPackThreadPool,
      }),
      new HappyPack({
        id: 'vue', // 用唯一的标识符id,来代表当前的HappyPack是用来处理一类特定的文件
        loaders: [
          {
            loader: 'vue-loader',
            options: vueLoaderConfig,
          },
        ],
        threadPool: HappyPackThreadPool,
      }),
    ]
    

    「注意,当项目较小时,多线程打包反而会使打包速度变慢。」

    copy-webpack-plugin

    我们在 public/index.html 中引入了静态资源,但是打包的时候 webpack 并不会帮我们拷贝到 dist 目录,因此 copy-webpack-plugin 就可以很好地帮我做拷贝的工作了。

    const CopyWebpackPlugin = require('copy-webpack-plugin')
    module.exports = {
      plugins: [
        new CopyWebpackPlugin({
          patterns: [
            {
              from: 'public/js/*.js',
              to: path.resolve(__dirname, 'dist', 'js'),
              flatten: true,
            },
          ],
        }),
      ],
    }
    

    IgnorePlugin

    这是 webpack 内置插件,它的作用是:忽略第三方包指定目录,让这些指定目录不要被打包进去。

    比如我们要使用 moment 这个第三方依赖库,该库主要是对时间进行格式化,并且支持多个国家语言。虽然我设置了语言为中文,但是在打包的时候,是会将所有语言都打包进去的。这样就导致包很大,打包速度又慢。对此,我们可以用 IgnorePlugin 使得指定目录被忽略,从而使得打包变快,文件变小。

    const Webpack = require('webpack')
    plugins: [
      //moment这个库中,如果引用了./locale/目录的内容,就忽略掉,不会打包进去
      new Webpack.IgnorePlugin(/\.\/locale/, /moment/),
    ]
    

    我们虽然按照上面的方法忽略了包含’./locale/'该字段路径的文件目录,但是也使得我们使用的时候不能显示中文语言了,所以这个时候可以手动引入中文语言的目录。

    import moment from 'moment'
    
    //手动引入所需要的语言包
    import 'moment/locale/zh-cn'
    
    moment.locale('zh-cn')
    
    let r = moment().endOf('day').fromNow()
    console.log(r)
    

    推荐文章

    • 搭建一个 vue-cli4+webpack 移动端框架(开箱即用)

    • 从零构建到优化一个类似vue-cli的脚手架

    • 封装一个toast和dialog组件并发布到npm

    • 从零开始构建一个webpack项目

    • 总结几个webpack打包优化的方法

    • 总结vue知识体系之高级应用篇

    • 总结vue知识体系之实用技巧

    • 总结vue知识体系之基础入门篇

    作者: lzg9527

    https://segmentfault.com/a/1190000022956602

    分享前端好文,点亮 在看 
    
    展开全文
  • 最全18个webpack插件

    2020-07-31 13:14:41
    专注处理 webpack 在编译过程中的某个特定的任务的功能模块,可以称为插件。 Plugin 是一个扩展器,它丰富了 webpack 本身,针对是 loader 结束后,webpack 打包的整个过程,它并不直接操作文件,而是基于事件...
  • webpack 插件(plugins)

    2019-06-20 18:26:14
    插件webpack 的支柱功能。webpack 自身也是构建于,你在 webpack 配置中用到的相同的插件系统之上! 插件目的在于解决loader无法实现的其他事。 由于插件可以携带参数/选项,你必须在 webpack 配置中,向...
  • Webpack插件

    千次阅读 2018-01-17 22:34:14
    插件(Plugins)是用来拓展Webpack功能的,它们会在整个构建过程中生效,执行相关的任务。 Loaders和Plugins常常被弄混,但是他们其实是完全不同的东西,可以这么来说,loaders是在打包构建过程中用来处理源文件的...
  • Webpack 常用插件总结

    2019-07-05 15:51:42
    讲讲webpack常用的几个插件: 1、uglifyjs-webpack-plugin 作用:压缩混淆js文件 用法配置: plugins: [ new UglifyJsPlugin({ uglifyOptions: { // 压缩配置 output: { // 输出 c...
  • webpack 插件列表 ==&amp;amp;amp;amp;gt; 通过npm官网查看配置用法 # html-webpack-plugin =&amp;amp;amp;amp;gt; https://www.npmjs.com/package/html-webpack-plugin # webpack默认只支持js入口,...
  • 前言通过插件我们可以扩展webpack,在合适的时机通过Webpack提供的 API 改变输出结果,使webpack可以执行更广泛的任务,拥有更强的构建能力。 本文将尝试探索 webpa...
  • webpack插件运行原理及编写

    千次阅读 2019-06-05 12:07:19
    webpack是一个很好用的打包工具,怎么配置和使用大家都比较熟悉了,其中在配置的过程中会用到很多plugin,如果想进一步了解webpack,就要了解plugin的工作机制,再进一步,就是自己动手封装一个plugin. 插件存在的...
  • Webpack】????Webpack 插件开发如此简单! 本文使用的Webpack-Quickly-Starter快速搭建 Webpack4 本地学习环境。 建议多阅读 Webpack 文档《Writing a Plugin》章节,学习开发简单插件。 本文将带你一起开发你的...
  • ◆◆webpack插件机制◆◆ webpack 插件机制是整个 webpack 工具的骨架,而 webpack 本身也是利用这套插件机制构建出来的。 □插件概念 专注处理 webpack 在编译过程中的某个特定的任务的功能模块,可以称为...
  • webpack在前端工程化应用上有着很重要的地位,说到webpack,就会想到一堆插件,...有兴趣的可以去阅读一些webpack插件的源码,当然如果有大牛看到,欢迎留言指正不足。 webpack插件的作用是用来解决一些loader无法...
  • 手写一个 webpack 插件

    2020-02-22 21:40:45
    webpack 是目前前端最流行的打包工具,在 webpack 的世界里,一切都可以看成是一个包模块。包括但不限于 JS,CSS,图片资源。webpack 本身只支持打包 JS 文件。其他的资源比如 CSS 和 图片只能通过 loader 进行编译...
  • plugin 是一个扩展器,它丰富了 webpack 本身,针对是 loader 结束后,webpack 打包的整个过程,它并不直接操作文件,而是基于事件机制工作,会监听 webpack 打包过程中的某些节点,执行广泛的任务。 Plugin 的特点 ...
  • 自定义webpack插件

    2019-03-16 02:40:07
    // MyPlugin.js function MyPlugin(options) { this.options = options; } MyPlugin.prototype.apply = function(compiler) { // ... compiler.plugin('compilation', function(compilation) { ...
  • 转载自掘金:...amp;utm_medium=referral#comment 目录 Tabable是什么? Tabable 用法 进阶一下 Tabable的其他方法 webpack流程 ...写一个插件 Webpack可以将其理解是一种基于事件流...
  • 来源 |https://github.com/Michael-lzg/my--article/blob/master/webpack/Plugin何为插件(Plugin)?专注处理 w...
  • vue.config.js添加webpack插件的写法

    千次阅读 2019-03-29 20:47:00
    2019独角兽企业重金招聘Python工程师标准>>> ...
  • 大多数项目随着时间的推移,经常会摒弃掉一...在日常开发中, 通过webpack 生成的 stats 文件实现了去除多余文件的插件useless-files-webpack-plugin 插件用法如下: const UselessFile = require('useless-files-we...
  • CSS 优化策略之webpack插件压缩CSS体积 对于CSS文件中包含的不必要的字符,例如注释、空白和缩进,我们可以在生产环境中将其删除,以达到减小文件大小的目的,这种技术也叫minification。而这些可以利用webpack构建...
  • 2、开启文件监听 3、webpack-dev-server热更新 安装依赖 cnpm i html-webpack-plugin webpack-dev-server -D 配置webpack.config.js 'use strict' const path = require('path'); const HtmlWeb...
  • 引入和使用webpack插件

    2019-08-10 11:28:07
    命令行执行 npm install html-webpack-plugin --save-dev 成功出现下面信息: html-webpack-plugin@3.2.0 added 58 packages from 73 contributors and audited 79 packages in 7.566s found 0 vulnerabilities ...
  • webpack 插件依赖

    2016-11-22 11:50:00
    webpack 插件依赖 安装自动化工具 webpack npm i webpack --save 安装开发服务器 webpack-dev-server npm i --save-dev webpack-dev-server // 启动命令 webpack-dev-save --progress react npm i --save react ...
  • 背景 ...带着这个问题,本章将带大家一起使用另一个美到粗暴的方式: 通过webpack 插件来实现骨架屏效果。 设计思想 这里假设你的项目是通过webpack 构建生成的静态部署资源。 并且你的构建过程中 ...
  • 有段时间发现本地npm run dev的时候样式好好的,npm run build后在手机里样式就变了,后面发现是一个插件搞的鬼,修改/build/webpack.prod.conf.js文件: ... new OptimizeCSSPlugin({ cssProcessorOptions: { ...
  • 浅析Webpack插件化设计

    2017-05-02 14:42:05
    本文为原创投稿文章,未经允许,请勿转载。 作者:郭祥,饿了么... 责编:陈秋歌,寻求报道或者投稿请发邮件至chenqg#csdn.net,或加微信:Rachel_qg。 了解更多前沿技术资讯,获取深度技术文章推荐,请关...
  • 开启gzip压缩-webpack插件

    千次阅读 2019-08-16 18:07:45
    我们使用 compression-webpack-plugin 插件进行压缩。 安装: npm install compression-webpack-plugin --save-dev 。compression-webpack-plugin 详细用法使用: const CompressionPlugin = require("compression-...
  • webpack插件的配置

    2020-07-21 18:26:17
    添加版权插件webpack.config.js文件中添加webpack包,之后在module.exports属性中添加plugins,添加版权插件 // 添加webpack const webpack = require('webpack'); // 添加插件 plugins: [ // 添加版权的...

空空如也

1 2 3 4 5 ... 20
收藏数 49,268
精华内容 19,707
关键字:

webpack插件