zoukankan      html  css  js  c++  java
  • 简明学习webpack

    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

  • 相关阅读:
    preprocess
    数组
    共用体
    动态内存管理函数
    C链表
    文件的定位与出错检查
    字符串读写函数
    C文件操作
    位运算
    爱好-超级IP:超级IP
  • 原文地址:https://www.cnblogs.com/code-klaus/p/15155002.html
Copyright © 2011-2022 走看看