zoukankan      html  css  js  c++  java
  • Webpack深入与实战 慕课网 免费 讲师qbaty 学习笔记

    注意:视频中的Webpack是3.X 目前2021年,Webpack安装后默认是5.X    中文官网

    如果跟着视频里面一步一步操作,一上来就一个大坑.翻阅了教程下面的留言区,重要找到了答题,特此说明  参考

    思想是不变的,但细节变化得蛮大的,

    第1章 webpack 3.X 基本介绍
    主要介绍webpack 的基本信息,如何安装 webpack,通过命令行如何使用webpack
    1-1 webpack 基本介绍 (07:03)
    1-2 Webpack 安装和命令行 (19:11)

    Webpack 5.X 基本命令行打包命令   webpack --mode development  前置步骤请参考上面的参考链接

    Webpack 5.X 运行方式:
    1.命令行方式:最直接的方式,如 webpack --mode development 
    2.package.json scripts 脚本方式:
    即在nodeJS项目的package.json文件的scripts增加配置

    "dev":"webpack --mode development",
    "build":"webpack --mode production"

    以后在命令行执行npm run dev便相当于执行webpack --mode development,执行npm run build便相当于执行webpack --mode production

    为了可以正常运行上面的脚本,需要安装 npm install webpack-cli

    "devDependencies": {
      "webpack": "^5.21.2"
    },
    "dependencies": {
    "webpack-cli": "^4.5.0" }

    换个角度,相当理解了package.json scripts属性的作用

    第2章 webpack 基本配置
    本章节主要介绍从一个项目着手开发,一开始需要配置的最基本的参数和属性有哪些。通过webpack 如何灵活使用这些参数,来实现更复杂的需求。
    2-1 建立项目的 webpack 配置文件 (08:47)
    2-2 webpack配置的 entry 和 output new (11:28)
    8:44 理解命令 npm run webpack

    第3章 生成项目中的html页面文件
    本章节主要介绍使用 HtmlWebpackPlugin 插件来帮助我们生成项目中的页面文件,通过插件的参数,配置来控制页面引入的资源,参数等。
    3-1 自动化生成项目中的html页面(上) (11:38)
    webpackage中插件的概念 使用npm 安装 html-webpackplugin --save-dev

    涉及:COMMON JS中模块引用语法 require
    2:47 var htmlWebpackPlugin = require('html-webpack-plugin') 官网上有说明
    引出了webpackplugin对应属性 plugins

    plugins: [
        new htmlWebpackPlugin({ //对应上面的var声明
            //参数对象
        })
    ]    

    3-2 自动化生成项目中的html页面(中) (15:51)

    3-3 自动化生成项目中的html页面(下) (27:00)

    第4章 处理项目中的资源文件
    本章节主要介绍,前端开发中主要静态文件的处理, 介绍了loader 的使用和loader 的概念,其中分别介绍了如何配置项目中支持ES6语法, less /sass 等css 预处理语言的支持。后几节介绍了图片和模板文件的处理。
    4-1 什么是 Loader 以及 Loader 的特性 (12:08)
    4-2 使用 babel-loader 转换 ES6 代码(上) (16:42)
    4-3 使用babel-loader 转换 ES6 代码 (下) (05:00)
    4-4 处理项目中的 css (21:35)
    4-5 使用 less 和 sass (09:05)
    4-6 处理模板文件 (13:47)
    4-7 处理图片以及其他文件 (21:43)

  • 相关阅读:
    年末反思
    Flink运行时架构
    Phoenix 启动报错:Error: ERROR 726 (43M10): Inconsistent namespace mapping properties. Cannot initiate connection as SYSTEM:CATALOG is found but client does not have phoenix.schema.
    Clickhouse学习
    Flink简单认识
    IDEA无法pull代码到本地,Can't Update No tracked branch configured for branch master or the branch doesn't exist.
    第1章 计算机系统漫游
    简单的 Shell 脚本入门教程
    开源≠免费 常见开源协议介绍
    MySQL 视图
  • 原文地址:https://www.cnblogs.com/zhuji/p/14393089.html
Copyright © 2011-2022 走看看