webpack学习笔记1

legendaryedu 发布于2019-08-23 13:46 / 836人阅读

摘要：头部资源终将占据统治地位，成为前端项目构建工具的头部资源。模块化编程模块的概念是将程序拆解为离散的功能块，通常称这些功能块为模块。模块相对于程序而言，具有更小的体积，单个模块具有清晰的目的，方便进行开发测试维护等工作。

webpack作用

webpack可以将前端工程中所有的静态资源打包成为一个或者多个js，静态资源包括css、图片等。

为什么要使用webpack，没有打包工具之前，页面之中使用ES6、SCSS、TypeScript等浏览器不支持的前端新语法的时候都非常困难，有了webpack就可以非常方便的在项目之中使用这些新的语法，从而提升前端项目开发的速度和质量。另外在webpack之中项目中所有的资源都是模块，包括js，还包括css、图片等等。只要有合适的loader去处理这些静态资源就可以了。webpack还提供了插件的功能，丰富了webpack的功能。以上的这些让webpack成为前端项目构建工具的主流和首选，gulp和grunt可能成为了历史。头部资源终将占据统治地位，webpack成为前端项目构建工具的头部资源。

模块化编程

模块的概念是将程序拆解为离散的功能块，通常称这些功能块为模块。模块相对于程序而言，具有更小的体积，单个模块具有清晰的目的，方便进行开发、测试、维护等工作。模块的功能经过了抽象，提高了代码的复用能力。

模块的打开姿势

webpack支持常见的模块依赖，如es5的import，commonjs的require，css文件的@import，样式中的url。webpack能够支持的模块有webpack常见的loader

webpack核心概念 entry 入口文件

webpack是通过递归的方式来找出所有依赖之间的关系，并构建依赖图。需要在配置文件中指定使用哪个模块作为依赖图的起始，进入起始依赖后就可以根据起始模块中指定的依赖来将其他依赖将入进来。多个入口匹配单一输出：entry:"./src/script/main.js"，在main.js之中可以使用require或者其他方法例如import来导入其他的文件。
module.export = {entry:"./index.js"}

当存在多个入口的时候呢，可以使用entry:[]的形式。
多个入口文件匹配多个输出结果：entry必须采用对象的方式，这样可以使用对象的key作为出口文件的文件名。并在不同的文件中使用这些不同的输出。示例：entry：{page1:"a.js",page2:"b.js"}，output:{path:"输出结果的绝对路径",filename:[name].js}这里必须使用占位符来达到生成不同文件的效果，为了显示多次输出的不同版本号可以使用[hash]占位符。
hash值采用md5算法，即根据文件中内容来改变。

output 输出文件

output指定了最终要将打包好的js放在什么路径下，默认是dist。路径指定的是绝对路径，需要通过nodejs的path模块来获取当前的文件路径。
const path = require("path")
module.export = {output:{path:path.resolve(__dirname,"dist"),filename:"bundle.js"}}

loader 加载器（中间件）

loader让webpack有能力去处理费JavaScript文件，webpack本身只能理解JavaScript。丰富loader（官方的和第三方）可以将所有类型的文件都转化为webpack可以理解的JavaScript，webpack发挥的作用是将JavaScript和转化为JavaScript的资源按照相互依赖的关系打包。
并且这些loader之间可以灵活的组装，开发者可以根据自己的需求灵活的定义loader的构成。loader的配置方法为
module.export = {

module:{
    rules:[
        {
            test:.js$,
            loader:"babel-loader"
        },
        {
            test:.css$,
            loader:"style-loader!css-loader"
        }
    ]
}

}
配置文件告诉webpack当遇到符合test对应正则表达式的文件时，先使用对应的loader转化一下。

babel-loader的使用方法

安装babel loader来处理es6的语法，安装npm较多，包括babel-loaderbabel-core
babel-loader可以通过参数presets（预设）来指定es6的版本，可选的参数有："es2015","es2016","es2017","latest"。在使用preset的时候不仅需要通过config.js来指定使用何种preset，还需要安装相关的preset的npm包。例如安装preset为latest的的npm包，命令是：npm install babel-preset-latest --save-dev

plugin 插件

还有一部分工作是loader不能完成，例如压缩、打包优化、重新定义环境中的变量等等。可以说plugin的能力是loader的父集。使用plugin的方式是先引入插件模块，通过require。然后在配置对象的plugin中创建插件的实例。
const htmlWebpackPlugin = require("html-webpack-plugin")
module.export = {

plugin:[
    new htmlWebpackPlugin({template:"./index.html"})
]

}

plugin接受一个数组作为其value，数组中是各个插件的构造函数，可以在这些构造函数传入相关的参数来达到目的。例如通过使用html-webpack-plugin来实现自动引入打包的内容，不再使用手动的方式来实现。还可以加入[hash]来保证引入文件的命名的唯一性，从而可以保证上线时候引用的是最新的版本。

html-webpack-plugin的参数有：
{filename:"生成的文件名",
title:"文件中的title",
template:"以什么文件作为其模板",
chunks:["使用什么chunk"],
excludeChunks:["排除什么chunk"]
inject:["chunk的引用放在什么地方"]
}

webpack命令行的一些参数

1.指定特定文件的loader： --module-bind "css=style-loader!css-loader"

2.显示打包进程： --progress

3.显示所有打包模块： --display-modules

4.显示打包原因： --display-reasons

5.指定打包配置文件： --config

6.自定义命令行脚本：在package.json之中来定义

云服务器 GPU云服务器学习笔记学习笔记一基础学习笔记深度学习笔记

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

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

webpack 学习笔记（一）

摘要：引言最近在学习，发现好多知识点，之前一点都没有接触过，如等等。使用本地安装，会存于文件夹内与属性内，更方便项目文件迁移以及协同开发等情况。引言最近在学习webpack，发现好多知识点，之前一点都没有接触过，如babel、core-js、browserslist等等。以前习惯了使用cli构建项目，很多东西不用考虑，拿来就用，这样的码农是不会有能力提升的，必须了解更多的知识点，才能成为...

zhangwang 2019-08-26 10:36 评论0 收藏0
React学习笔记1：环境搭建

摘要：新搭建的个人博客，本文地址学习笔记环境搭建本文的书写环境为，之后会补充下的差异创建学习目录初始化项目根据相关提示完善信息，入口文件安装相关包，并且使用也就是支持，需要包，因为我之前做个一些相关项目，所以部分包已经全局安装，比如等等，大家新搭建的个人博客，本文地址：React学习笔记1：环境搭建本文的书写环境为mac，之后会补充windows下的差异 1、创建学习目录 mkdir l...

Sourcelink 2019-08-19 17:26 评论0 收藏0
我的webpack学习笔记（一）

摘要：前言在上一篇文章中我介绍了学习前的准备工作，下面开始的学习。目标一般我们接触到的关于的文章，都是以解读官方文档为主，而且是针对单页面项目的应用。我先在假设要做一个多页面应用，该如何去通过打包。前言在上一篇文章中我介绍了学习webpack前的准备工作，下面开始webpack的学习。 *创建webpack-demo文件夹 $ mkdir webpack-demo $ cd webpac...

wh469012917 2019-08-21 11:48 评论0 收藏0
我的webpack学习笔记（一）

摘要：前言在上一篇文章中我介绍了学习前的准备工作，下面开始的学习。目标一般我们接触到的关于的文章，都是以解读官方文档为主，而且是针对单页面项目的应用。我先在假设要做一个多页面应用，该如何去通过打包。前言在上一篇文章中我介绍了学习webpack前的准备工作，下面开始webpack的学习。 *创建webpack-demo文件夹 $ mkdir webpack-demo $ cd webpac...

CrazyCodes 2019-08-29 12:54 评论0 收藏0
webpack学习笔记

摘要：运行该语句会执行如下步骤使用进行文件压缩。设置环境变量，触发某些包，以不同的方式进行编译。在原始的源码中执行查找和替换操作。等同于表示任何出现的地方都会被替换为。提供函数用来合并配置对象当文件小于限制，会返回。选项 1.devtool：通过在浏览器调试工具(browser devtools)中添加元信息(meta info)增强调试。 2.resolve.alias:创建 impor...

Soarkey 2019-08-22 10:53 评论0 收藏0