webpack核心概念

lordharrd 发布于2019-08-22 18:10 / 1978人阅读

摘要：一核心概念二代码入口打包入口单个或多个入口，多个入口多页面应用程序或分开的。

一、webpack核心概念

1.Entry
2.Output
3.Loaders
4.Plugins

二、Entry

代码入口

打包入口

单个或多个入口，多个入口：多页面应用程序；或分开的。

示例：

// 单个
module.exports = {
    entry: "index.js"
}

// 多个入口
module.exports = {
    entry: ["index.js", "vendor.js"]
}

// 另外写法，推荐写法
module.exports = {
    entry: {
        index: "index.js"
    }
}

module.exports = {
    entry: {
        index: "index.js",
        vendor: "vendor.js"
    }
}

module.exports = {
    entry: {
        index: ["index.js", "app.js"],
        vendor: "vendor.js"
    }
}

三、Output

打包成的文件（bundle）
一个或多个
自定义规则

示例：

// 单个输出
module.exports = {
    entry: {
        index: "index.js"
    },
    output: {
        filename: "index.min.js"
    },
}

// 多个输出
module.exports = {
    entry: {
        index: "index.js",
        vendor: "vendor.js"
    },
    output: {
        filename: "[name].min.[hash:5].js"
    }
}

四、Loaders

1.处理文件
2.转化为模块

示例：

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

五、Plugins

1.参与打包整个过程
2.打包优化和压缩
3.配置编译时的变量
4.极其灵活的

示例：

const webpack = require("webpack");

module.exports = {
    plugins: [
        new webpack.optimize.UglifyJsPlugin()
    ]
}

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

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

webpack 四个核心概念之Entry

摘要：因为是基于的一款工具，所以在学习过程中涉及到的知识也会进行解释进行发散性拓展。最终返回给调用的是而不是。这里引用官网的一个例子请输入代码模块代码在这。在这个例子中，定义了一个函数。也就是说合并了多个文件的依赖模块。因为webpack是基于nodejs的一款工具，所以在学习过程中涉及到的nodejs知识也会进行解释进行发散性拓展。webpack中文文档一、module.export...

Scliang 2019-08-23 18:04 评论0 收藏0
webpack从0到1超详细超基础学习教程

摘要：在进行的学习之前，第一步就是要让大家认识一下中四个核心的概念。找到这个起始点，再从起始点出发来看依赖的文件，每个依赖都将被处理，最后输出。概念自己是一个一听到webpack就头大，看着一堆不知道那是什么玩意的东西总觉得自己做好前端就行了，但是在使用vue-cli的时候总觉得要改其中的一些东西进行项目初始化的时候能够更好使用！所以想要根据官方文档进行一个webpack的教程，写这些主...

douzifly 2019-08-29 15:31 评论0 收藏0
webpack从0到1超详细超基础学习教程

摘要：在进行的学习之前，第一步就是要让大家认识一下中四个核心的概念。找到这个起始点，再从起始点出发来看依赖的文件，每个依赖都将被处理，最后输出。概念自己是一个一听到webpack就头大，看着一堆不知道那是什么玩意的东西总觉得自己做好前端就行了，但是在使用vue-cli的时候总觉得要改其中的一些东西进行项目初始化的时候能够更好使用！所以想要根据官方文档进行一个webpack的教程，写这些主...

Tychio 2019-08-22 17:34 评论0 收藏0
webpack从0到1超详细超基础学习教程

摘要：在进行的学习之前，第一步就是要让大家认识一下中四个核心的概念。找到这个起始点，再从起始点出发来看依赖的文件，每个依赖都将被处理，最后输出。概念自己是一个一听到webpack就头大，看着一堆不知道那是什么玩意的东西总觉得自己做好前端就行了，但是在使用vue-cli的时候总觉得要改其中的一些东西进行项目初始化的时候能够更好使用！所以想要根据官方文档进行一个webpack的教程，写这些主...

niceforbear 2019-08-02 10:32 评论0 收藏0