首页手记 webpack学习笔记——插件...

webpack学习笔记——插件篇plugins

标签：

Html/CSS

前言

这篇文章纯粹是作为笔记记录的方式分享我平时项目中常用的一些插件，以及提供一些我觉得不错的博文链接～

以下是常用插件列表，假如你都知道的话就可以直接跳过这篇文章啦

happypack
dllplugin
commons-chunk-plugin
webpack-dev-server
webpack-dev-middleware
webpack-hot-middleware（HMR）
webpack-hot-server-middleware
http-proxy-middleware
html-webpack-plugin
extract-text-webpack-plugin
optimize-css-assets-webpack-plugin
uglifyjs-webpack-plugin
imagemin-webapack-plugin
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

再打包我们原先的业务代码，大功告成～！

资料分享：使用 HappyPack 和 DllPlugin 来提升你的 Webpack 构建速度

commons-chunk-plugin

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

关于commons-chunk-plugin更详细的使用和配置以及与DllPlugin的异同之处，有两篇不错的文章分享给大家～

知多一点 webpack 的 CommonsChunkPlugin

webpack分离第三方库(CommonsChunkPlugin并不是分离第三方库的好办法DllPlugin科学利用浏览器缓存）

协助开发类

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的结合版，我也只是听说。。并没有用过。

详细分析推荐一下文章～

webpack官网介绍

webpack-dev-server和webpack-dev-middleware的区别

Webpack vs webpack-dev-server vs webpack-dev-middleware vs webpack-hot-middleware vs etc

http-proxy-middleware

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

关于proxyTable的知识，可以阅读一下以下文章

proxyTable配置表

Vue-cli proxyTable 解决开发环境的跨域问题

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

参考文章

https://github.com/chimurai/http-proxy-middleware

使用http-proxy-middleware解决前端开发中跨域的问题

http-proxy-middleware

构建基础类

html-webpack-plugin

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

基础用法参考官网文档

webpack官网文档——HtmlWebpackPlugin

对于多页面应用，可以通过配置多个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
    })
]

优秀文章分享～

webpack官网文档——ExtractTextWebpackPlugin

optimize-css-assets-webpack-plugin

webpack4-css提取、压缩插件使用遇到的问题与解决。

【WEBPACK】分离css单独打包

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
        }
    }),
]