国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

從零開始的webpack生活-0x016：OtherPlugin其他常用

chinafgj / 2074人閱讀

摘要：概述上一章講的是分離樣式，這一章講的是剩下的一些我常用的插件和上一章是沒有任何關(guān)系。環(huán)境搭建定義環(huán)境插件介紹這個插件用來定義環(huán)境變量的，直接定義在了下。安裝依賴添加資源修改配置打包其他更多配置請查閱關(guān)于資源源代碼

0x001 概述

上一章講的是分離樣式，這一章講的是剩下的一些我常用的插件,和上一章是沒有任何關(guān)系。

0x002 環(huán)境搭建 
$ 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定義環(huán)境

插件介紹
這個插件用來定義環(huán)境變量的，直接定義在了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");
}

編譯并查看結(jié)果

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

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

/***/ })

更多配置請查閱webpack關(guān)于EnvironmentPlugin相關(guān)章節(jié)

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復(fù)制文件

插件介紹
用來直接復(fù)制文件的,比如資源文件，有一些文件我們希望他不打包到js中，但是又需要部署到生成環(huán)境下，為了方便部署，將它們和要部署的文件放在同一個文件夾下，方便部署。

安裝依賴

$ 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關(guān)于CopyWebpackPlugin

0x006 資源

源代碼

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/89747.html

相關(guān)文章

  • 從零開始的webpack生活-0x001：webpack初次相逢

    摘要：同時不能直接單純的指定輸出的文件名稱，比如，將會報錯，可以換成以下方式指定，或者其他類似方式。如果打包過程出現(xiàn)錯誤，比如語法錯誤，將會在控制臺以紅色文字顯示，并且在你修復(fù)之后會再次打包。 0x001 概述 其實我不知道怎么寫，所以決定就一塊一塊的寫點平常配置的過程，根據(jù)不同東西稍微分區(qū)一下就好了 0x002 初始化項目結(jié)構(gòu) $ mkdir webpack_study $ cd webp...

    Turbo 評論0 收藏0

  • 從零開始的webpack生活-0x014：CustomLoader自定義loader

    摘要：接下來將的本質(zhì)和自定義。環(huán)境配置這一次需要兩個項目，一個項目是，實現(xiàn)了，一個是，使用了。當(dāng)然沒有必要去真的重復(fù)制造輪子，只是為了掌握這種造輪子的技術(shù)，對理解整個工程，對理解功能提供更多思路而已。 0x001 概述 上一章我們講了eslint-loader的配置，常用類型的常用loader已經(jīng)都講完了，大體上其他的都大同小異，需要去各大loader的官方查閱用戶手冊就可以了。接下來將lo...

    taohonghui 評論0 收藏0

  • 從零開始的webpack生活-0x002：devServer自動刷新

    摘要：概述上一章已經(jīng)實現(xiàn)了最簡單的配置文件使用和監(jiān)聽功能，這一章要開始實現(xiàn)自動刷新。只能在終端中使用的在章節(jié)中指令后標(biāo)有可以使用的功能，快速調(diào)用終端最終項目文件夾結(jié)構(gòu)資源源代碼 0x001 概述 上一章已經(jīng)實現(xiàn)了最簡單的webpack配置文件使用和webpack監(jiān)聽功能，這一章要開始實現(xiàn)自動刷新。 0x002 瀏覽器自動刷新 創(chuàng)建新的項目框架 - webpack_study + ...

    AlanKeene 評論0 收藏0

  • 從零開始的webpack生活-0x017：CustomPlugin自定義插件

    摘要：概述上一章講的是其他一些常用的小插件，這一章講的是自定義插件。打包并查看文件更多配置請查閱關(guān)于自定義章節(jié)資源源代碼 0x001 概述 上一章講的是其他一些常用的小插件，這一章講的是自定義插件。 0x002 環(huán)境配置 $ mkdir 0x0016-other-plugin $ cd 0x0016-other-plugin $ npm init -y $ vim webpack.confi...

    springDevBird 評論0 收藏0

  • 從零開始的webpack生活-0x011：StylingLoader裝載樣式

    0x001 概述 上一章講的是裝載模板，這一章講的是裝載樣式 0x002 配置環(huán)境 $ 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 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<