• Webpack 学习手记


    官网:https://www.webpackjs.com/     参考网址:https://www.cnblogs.com/cangqinglang/p/8964460.html

    1.webpack简述:是一个前端资源加载/打包工具。

    一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle

    2.webpack的核心概念

    入口entry:指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始,默认./src,可以配置。

    出口output:告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为./dist,可以配置。

    loader(加载器?):处理非js文件(webpack 自身只理解 JavaScript)。

    插件plugins

    模式:设置开发模式 development 或 production(mode参数)。

     3.安装webpack

    使用webpack的前提是了解npm和安装了node.js(百度下载然后下一步下一步安装即可)。根据官网API一步一步的操作就可以。认识了解package.json也很有必要,文档API讲的很清楚了。网上的视频大多数都是早期的,现在webpack已经更新到4.17.1,还是官方文档比较靠谱。

    (1)选择合适的地方建个文件夹,初始化 npm,然后 在本地安装 webpack,接着安装 webpack-cli。在命令行中运行win+R→cmd

    mkdir webpack-demo && cd webpack-demo
    npm init -y
    npm install webpack webpack-cli --save-dev 
     

    (2)在文件夹下创建以下目录结构、文件和内容:

    index.js

    import _ from 'lodash';

    function component() {
    var element = document.createElement('div');

    // Lodash, currently included via a script, is required for this line to work
    // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
    }

    document.body.appendChild(component());

    index.html

    <!doctype html>
    <html>

    <head>
    <meta charset="UTF-8">
    <title>起步</title>
    </head>

    <body>
    <script src="main.js"></script>
    </body>

    </html>

    (3)调整 package.json 文件,以便确保我们安装包是私有的(private),并且移除main 入口 

    4.创建一个bundle文件(使用webpack打包 )
    
    
    (1)要在 index.js 中打包 lodash 依赖,我们需要在本地安装 library:
    npm install --save lodash

    (2)进行打包,会自动创建打包后的main.js文件(boundle),自己会处理index.js中引入的import:
    ——执行 npx webpack,会将我们的脚本作为入口起点,然后 输出 为 main.js。Node 8.2+ 版本提供的 npx 命令,可以运行在初始安装的 webpack 包(package)的 webpack 二进制文件(./node_modules/.bin/webpack):
    npx webpack

    (3)在浏览器中打开 index.html,如果一切访问都正常,你应该能看到以下文本:'Hello webpack'。

    注意到package文件的配置项自动修改了。入口修改为main.js

    
    
    
  • 相关阅读:
    python判断语句和循环语句
    Web项目如何做单元测试
    PHP接口自动化测试框架实现
    引入缺陷的原因都有哪些?
    测试基础:(一)
    测试基础(二)
    测试术语2
    测试术语3
    测试术语4
    Spring Cloud Stream与Spring Cloud Bus区别?
  • 原文地址:https://www.cnblogs.com/suola/p/9556196.html
Copyright © 2020-2023  润新知