webpack 学习笔记 (一)
webpack 作为当下前端前沿最受欢迎的打包工具,作为一个前端开发人员是很有必要去了解下它的。
题外话:
npm i -D 是 npm install --save-dev的简写,是安装模块并保存到package.json的devDependencies
安装webpack
npm i -D webpack (稳定版)
npm i -D webpack@<version>(指定版本号)
使用webpack命令行
在packjson.json
"scripts": {
"build": "webpack src/main.js dist/bundle.js", // 将指定文件打包到指定目录的文件
}
然后就可以使用命令打包 npm run build
使用Loader
通常webpack的配置文件都会放在webpack.config.js文件中(这个是webpack会去默认读取的)
基础内容:
const path = require('path');
module.exports = {
// JavaScript 执行入口文件
entry: './main.js',
output: {
// 将所有依赖的模块合并输出到一个bundle.js文件
filename: 'bundle.js',
// 将输出文件都放在dist目录下
path: path.resolve(__dirname, './dist'),
},
module: {
rules: [
{
// 用正在向嗯表达式去匹配要用该Loader转换的CSS文件
test: /\.css$/,
use: ['style-loader', 'css-loader?minimize'] }
]
}
};
需要安装Loader npm i -D style-loader css-loader
解读
- use属性的值需要是一个由Loader名称组成的数组,Loader的执行顺兴是由后到前的
- 每个Loader都可以通过URL querstring 的方式来传入参数, 例如 css-loader?minimize中的minimize高祖css-loader要开启css压缩
使用Plugin
Plugin是用来扩展Webpack功能的,通过在构建流程里注入钩子实现,它为Webpack带来了很大的灵活性。
配置方面: plugins属性是一个数组,里面的每一项都是插件的一个实例,在实例化一个组件时可以通过构造函数传入这个组件支持的配置属性。
使用DevServer
作用:
- 提供HTTP服务而不是使用本地文件预览
- 监听文件的变化并自动刷新网页,做到实时预览
- 支持Source Map, 以方便调试
安装: npm i -D webpack-dev-server
启动配置:
"build": "webpack-dev-server --hot --devtool source-map"
当你启动的时候会看到这样一串日志:
Project is running at http://localhost:8081/
webpack output is served from /
这意味着DevServer启动的HTTP服务器在8081端口,DevServer启动后会一直主流在后台保持运行,访问这个网址,就能获取项目根目录下的index.html
这时候还不会形成打包文件。
实施预览:
开启: webpack --watch
这样的话就会实施知道改动代码就会进行更新客户端的内容(这回刷新整个页面)
模块热替换:
开启: --hot
这样的话,代码更改只会实现局部刷新
支持Source Map
开启 --devtool source-map
总结:
- Entry: 入口, webpack执行创建的第一步将从Entry开始,可抽象成输入
- Module: 模块, 在Webpack里一切皆模块,一个模块对应一个文件。Webpack会从配置的Entry开始递归找出所有的依赖的模块
- Chunk: 代码块,一个Chunk由多个模块组合而成,用于代码合并与分割
- Loader: 模块加载器,用于经模块的原内容按照需求装换成新内容
- Plugin: 扩展插件, 在Webpack构建流程中的特定时机注入扩展逻辑,来改变构建结果或做我们想要的事情
- Output: 输出结果,在Webpack经过一系列处理并得出最终想要的代码后输出结果。
webpack 学习笔记 (一)的更多相关文章
- 【原】webpack学习笔记
之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...
- 更博不能忘——webpack学习笔记
webpack是前端构建系统就像grunt和gulp(之前有学习过grunt所以也就大概明白webpack是个什么东西),所以说前端技术大部分还真是相通的,现在觉得当时多看的东西并不白费,虽然长时间不 ...
- webpack学习笔记(二)-- 初学者常见问题及解决方法
这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解 ...
- webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件
一 .webpack学习环境准备: 1:window系统 2:安装node.js 官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...
- Webpack学习笔记九 webpack优化总结
webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, ...
- Webpack学习笔记一:What is webpack
#,Loaders干嘛的,webpack can only process JavaScript natively, but loaders are used to transform other ...
- webpack学习笔记—webpack安装、基本配置
文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...
- 【webpack学习笔记】a04-建立开发环境
开发环境就是在开发过程中为了方便配置的环境,生产环境就是开发完成即将上线的情况. 好了,说了句废话,切入正题. 在开发时,打包后的文件压缩成一团,报错调试的时候傻眼了有木有?每次做出修改需要到浏览器查 ...
- Webpack 学习笔记总结
Webpack安装 Linux系统默认已经安装了node&npm,但版本比较低,而且没法升级,可以重新下载Node然后通过软链接替换系统自带的node和npm; ln -s /path_to/ ...
- webpack学习笔记丁点积累
webpack是什么? https://webpack.js.org/concepts/ https://code.tutsplus.com/tutorials/introduction-to-web ...
随机推荐
- 概率和期望dp
概率和期望dp 概率和期望好神啊,完全不会. 网上说概率要顺着推,期望要逆着推,然而我目前做的概率期望题正好都与此相反2333 概率: 关于概率:他非常健康 初中概率题非常恐怖.现在来思考一道题: ...
- tarjan【模板】缩点
传送门:https://www.luogu.org/problemnew/show/P3387 首先呢,tarjan找一个图的强连通分量是基于对图的dfs的.这中间开了一个dfn[]代表dfs序,还有 ...
- apache不能启动LoadModule php5_module modules/ph
apache不能启动LoadModule php5_module modules/php5apache2.dll的问题 主要是版本问题!!有点不爽!! apache不能启动 加入下面两行,apache ...
- Odoo开发调试技巧
转载请注明原文地址:https://www.cnblogs.com/cnodoo/p/9307490.html 一:Odoo控制台error日志一般为以下格式 Traceback (most rec ...
- Android开发环境的发展以及重装系统之后在myeclipse重配Android开发环境。
android的开发环境早期要自己去去官网下SDK,ADT,AVD等.不仅在一开始要面临国内防火墙的阻拦,四处奔波之后都下载好了,还得自己Linked,可谓困难重重.随着android开发的火热,上面 ...
- Table Generator 表格样式生成代码
<style type="text/css"> .tg {border-collapse:collapse;border-spacing:0;} .tg td{font ...
- ASP.NET Core 中 HttpContext 详解与使用 | Microsoft.AspNetCore.Http 详解
笔者没有学 ASP.NET,直接学 ASP.NET Core ,学完 ASP.NET Core MVC 基础后,开始学习 ASP.NET Core 的运行原理.发现应用程序有一个非常主要的 “传导体” ...
- 大数据入门第二十二天——spark(一)入门与安装
一.概述 1.什么是spark 从官网http://spark.apache.org/可以得知: Apache Spark™ is a fast and general engine for larg ...
- WPF编程,通过Double Animation同时动态缩放和旋转控件的一种方法。
原文:WPF编程,通过Double Animation同时动态缩放和旋转控件的一种方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_4330793 ...
- 01-BAT算法特训班