从零开始的webpack生活-0x016：OtherPlugin其他常用

chinafgj 发布于2019-08-21 17:36 / 2073人阅读

摘要：概述上一章讲的是分离样式，这一章讲的是剩下的一些我常用的插件和上一章是没有任何关系。环境搭建定义环境插件介绍这个插件用来定义环境变量的，直接定义在了下。安装依赖添加资源修改配置打包其他更多配置请查阅关于资源源代码

0x001 概述

上一章讲的是分离样式，这一章讲的是剩下的一些我常用的插件,和上一章是没有任何关系。

0x002 环境搭建

$ mkdir 0x0016-other-plugin
$ cd 0x0016-other-plugin
$ npm init -y
$ vim webpack.config.js

// ./webpack.config.js
const path = require("path");

module.exports = {
    entry : {
        "index": ["./src/index.js"],
    },
    output: {
        path    : path.join(__dirname, "dist"),
        filename: "[name].bundle.js"
    }
;

0x003 EnvironmentPlugin定义环境

插件介绍
这个插件用来定义环境变量的，直接定义在了process.env下。

修改配置

plugins: [
    new webpack.EnvironmentPlugin({
        NODE_ENV:"development",
        DEBUG:false
    })
]

编写代码

if (process.env.NODE_ENV==="production") {
    console.log("Welcome to production");
}
if (process.env.DEBUG) {
    console.log("Debugging output");
}

编译并查看结果

/* 1 */
/***/ (function(module, exports, __webpack_require__) {

if (false) {
    console.log("Welcome to production");
}
if (false) {
    console.log("Debugging output");
}

/***/ })

更多配置请查阅webpack关于EnvironmentPlugin相关章节

0x004 CleanWebpackPlugin清除文件夹

插件介绍
这个插件用来清除某个路径下的文件的，一般用来清理上次打包之后的残留文件。

不使用插件打包文件
这里我们修改一下output.filename:为[name].[chunkhash].js"，这样每次输出的文件就都不一样了

打包代码

$ webpack
// ./dist
index.dfa7ffffd294976d60a25f.js

修改代码

// ./src/index.js
if (process.env.NODE_ENV==="production") {
    console.log("Welcome to production");
}
if (process.env.DEBUG) {
    console.log("Debugging output");
}
console.log("clearwebpackplugin")

再次打包

$ webpack
// ./dist
index.69ed567b40b7234d1ea4.js
index.dfa7ffffd294976d60a25f.js

可以看到，上次打包的文件依旧在，这不方面我们直接部署到线上，手动删除可不符合webpack的初衷，所以需要用到这个插件

安装依赖

$ cnpm install --save-dev clean-webpack-plugin

修改依赖

const path               = require("path");
var webpack              = require("webpack")
const CleanWebpackPlugin = require("clean-webpack-plugin")

module.exports = {
    entry : {
        "index": ["./src/index.js"],
    },
    output: {
        path    : path.join(__dirname, "dist"),
        filename: "[name].[chunkhash].js"
    },

    plugins: [
        new webpack.EnvironmentPlugin({
            NODE_ENV: "development",
            DEBUG   : false
        }),
        new CleanWebpackPlugin(path.resolve(__dirname, "dist"))
    ]
};

打包编译

$ webpack

// ./dist
index.69ed567b40b7234d1ea4.js

啊世界清静了，以前的文件都没了!

更多配置请查看clean-webpack-plugin官方文档

0x005 copyWebpackPlugin复制文件

插件介绍
用来直接复制文件的,比如资源文件，有一些文件我们希望他不打包到js中，但是又需要部署到生成环境下，为了方便部署，将它们和要部署的文件放在同一个文件夹下，方便部署。

安装依赖

$ cnpm install --save-dev copy-webpack-plugin

添加资源

$ mkdir ./asset
$ cd ./asset
$ vim resource.txt
this is resource!

修改配置

const path               = require("path");
const webpack              = require("webpack")
const CleanWebpackPlugin = require("clean-webpack-plugin")
const CopyWebpackPlugin=require("copy-webpack-plugin")
module.exports = {
    entry : {
        "index": ["./src/index.js"],
    },
    output: {
        path    : path.join(__dirname, "dist"),
        filename: "[name].[chunkhash].js"
    },

    plugins: [
        new webpack.EnvironmentPlugin({
            NODE_ENV: "development",
            DEBUG   : false
        }),
        new CleanWebpackPlugin(path.resolve(__dirname, "dist")),
        new CopyWebpackPlugin([
            {
                from:path.resolve(__dirname,"asset"),
                to:path.resolve(__dirname,"dist/asset")
            }
        ])
    ]
};

打包

$ webpack
// ./dist
asset
    -resource.txt
index.69ed567b40b7234d1ea4.js

其他更多配置请查阅webpack关于CopyWebpackPlugin

0x006 资源

源代码

云服务器 GPU云服务器从零开始的邮件服务器从零开始 linux从零开始 python从零开始

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

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

从零开始的webpack生活-0x001：webpack初次相逢

摘要：同时不能直接单纯的指定输出的文件名称，比如，将会报错，可以换成以下方式指定，或者其他类似方式。如果打包过程出现错误，比如语法错误，将会在控制台以红色文字显示，并且在你修复之后会再次打包。 0x001 概述其实我不知道怎么写，所以决定就一块一块的写点平常配置的过程，根据不同东西稍微分区一下就好了 0x002 初始化项目结构 $ mkdir webpack_study $ cd webp...

Turbo 2019-08-21 17:27 评论0 收藏0
从零开始的webpack生活-0x014：CustomLoader自定义loader

摘要：接下来将的本质和自定义。环境配置这一次需要两个项目，一个项目是，实现了，一个是，使用了。当然没有必要去真的重复制造轮子，只是为了掌握这种造轮子的技术，对理解整个工程，对理解功能提供更多思路而已。 0x001 概述上一章我们讲了eslint-loader的配置，常用类型的常用loader已经都讲完了，大体上其他的都大同小异，需要去各大loader的官方查阅用户手册就可以了。接下来将lo...

taohonghui 2019-08-21 17:32 评论0 收藏0
从零开始的webpack生活-0x002：devServer自动刷新

摘要：概述上一章已经实现了最简单的配置文件使用和监听功能，这一章要开始实现自动刷新。只能在终端中使用的在章节中指令后标有可以使用的功能，快速调用终端最终项目文件夹结构资源源代码 0x001 概述上一章已经实现了最简单的webpack配置文件使用和webpack监听功能，这一章要开始实现自动刷新。 0x002 浏览器自动刷新创建新的项目框架 - webpack_study + ...

AlanKeene 2019-08-21 17:27 评论0 收藏0
从零开始的webpack生活-0x017：CustomPlugin自定义插件

摘要：概述上一章讲的是其他一些常用的小插件，这一章讲的是自定义插件。打包并查看文件更多配置请查阅关于自定义章节资源源代码 0x001 概述上一章讲的是其他一些常用的小插件，这一章讲的是自定义插件。 0x002 环境配置 $ mkdir 0x0016-other-plugin $ cd 0x0016-other-plugin $ npm init -y $ vim webpack.confi...

springDevBird 2019-08-21 17:36 评论0 收藏0
从零开始的webpack生活-0x011：StylingLoader装载样式

0x001 概述上一章讲的是装载模板，这一章讲的是装载样式 0x002 配置环境 $ mkdir 0x011-styling-loader $ cd 0x011-styling-loader $ npm init -y $ npm install --save-dev webpack $ touch ./src/index.js $ vim webpack.config.js // ./web...

mylxsw 2019-08-21 17:31 评论0 收藏0