首页 > 其他分享> 文章详细

简明学习webpack

2021-08-18 07:00:07 阅读：233 来源： 互联网

标签：文件 chunk 简明 loader 学习 webpack 模块 css

webpack配置项太多了，我的学习目标就是知道什么是webpack，它干嘛的，基础操作，下面开始。

了解webpack原理和概念

树结构：在一个入口文件中引入所有资源，形成所有依赖关系的树状图

模块：任意一个功能模块，例如es6模块，资源模块等等

chunk：打包过程中被操作的模块文件叫做chunk，例如异步加载一个模块就是一个chunk

bundle：bundle是最终打包后的文件，最终文件可以和chunk长得一模一样，但是大部分情况下它是多个chunk的集合

webpack.config.js的文件配置

const {resolve} = require('path');
module.exports = {
    /*
    * 1 entry 入口 指webpack以哪个文件作为入口起点开始打包，分析构建内部依赖图
    * */
    entry:'./src/index.js',

    /*
    * 2 output 输出 指webpack打包后的资源bundle输出到哪里，以及如何命名
    * */
    output:{
        fileName:'build.js',
        path: resolve(__dirname,'build') //代表当前文件根目录下
    },

    /*
    * 3 loader webpack本身只能处理js模块，如果要处理其他类型的文件就需要使用loader进行转换。所以如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader，
    * */
    module:{
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    },
    /*
    * 4 plugins 插件 用于执行范围更广的任务，插件的范围包括 从打包优化和压缩一直到重新定义环境中的变量等
    * */
    plugins:[
        new webpack.BannerPlugin('菜鸟教程 webpack 实例')
    ],

    /*
    * 5 mode
    * 开发模式（development） 配置比较简单，能让代码本地运行即可
    * 生产模式（production） 线上模式，代码一定是最优化且无bug的
    * */
    mode:'development'
};

具体的还有多入口和多出口配置打包css/html/less/sass资源等等，后续再补，关于webpack的安装和配置可以参考菜鸟教程的这篇

https://www.runoob.com/w3cnote/webpack-tutorial.html

标签：文件,chunk,简明,loader,学习,webpack,模块,css
来源： https://www.cnblogs.com/code-klaus/p/15155002.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

简明学习webpack

了解webpack原理和概念