前端模块打包工具--webpack

webpack打包：loader资源加载器

webpack只是打包工具
需要配置加载器来编译转换代码，核心是loader机制

webpack基本使用

yarn init 生成pakage.json文件
yarn add webpack webpack-cli --dev 安装webpack模块
yarn webpack 运行webpack打包

webpack配置文件：webpack.config.js

打包js文件

const path = require('path')
module.exports = {mode:'development'//webpack工作模式配置entry:'./sr/main.js',//入口文件【相对路径】output:{filename:'bundle.js',//生成文件名path:path.join(__dirname,'output')//path属性必须为绝对路径，根据path模块函数获取_dirname属性}
}

loader资源加载器处理文件

yarn add css-loader --dev 处理css文件
yarn add style-loader --dev 追加处理后的css样式到页面
yarn add file-loader:处理图片资源
yarn add url-loader 将图片资源转换为data-url
yarn add html-loader --dev处理html文件


const path = require('path')
module.exports = {mode:'development'//webpack工作模式配置：none打包运行原始代码entry:'./sr/main.css',//入口文件【相对路径】,配置css loader处理css文件 yarn add css-loaderoutput:{filename:'bundle.css',//生成文件名path:path.join(__dirname,'output'),//path属性必须为绝对路径，根据path模块函数获取_dirname属性publicPath:'dist/'//指定打包后文件存放位置},module：{rules:[{test:/.css$/,use:[//倒序执行'style-loader',//yarn add style-loader --dev 添加css样式页面'css-loader']//yarn add css-loader 处理css文件},{test:/.png$/,//use:'file-loader'//yarn add file-loader --dev:处理图片资源存放到目标路径下use:{loader:'url-loader',//yarn add url-loader --dev 将图片资源转换为data-urloptions:{limit:10*1024//10KB}}}]}}

webpack模块加载方式（导入资源文件）

1.ES Module标准：import声明

2.AMD标准：require函数和define函数

3.commmJS+node.js:requrie函数

4.样式文件中@import和url函数
5.html文件中图片标签的src属性

webpack与ES6：配置加载器转换ES6新特性

yarn add babel-loader @babel/core @babel/preset-env --dev处理转换ES6新特性，配置js文件loader为babel-loder

const path = require('path')
module.exports = {mode:'development'//webpack工作模式配置：none打包运行原始代码entry:'./sr/main.js',//入口文件【相对路径】output:{filename:'bundle.js',//生成文件名path:path.join(__dirname,'output')//path属性必须为绝对路径，根据path模块函数获取_dirname属性publicPath:'dist/'//指定打包后文件存放位置},module:{rules:[{test:/.js$/,use:{loader:'babel-loader',options:{presets:['@babel/preset-env']}}}]}
}

前端模块打包工具--webpack相关推荐

前端自动化打包工具--webpack
前端自动化打包工具–webpack 背景记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的 ...
前端模块打包工具都有哪些---kalrry---ing
前端模块打包工具都有哪些---kalrry---ing 前言一.Webpack 二.Parcel 三.Rollup 四.三者对比 END---待学前言 Win配置记录 Mac配置记录一.Webp ...
浅谈前端项目打包工具webpack和gulp
webpack:一个模块打包工具(更适合单页面spa模块开发) Webpack更侧重于模块打包,把开发中的所有资源(图片.js文件.css文件等)看成模块.Webpack是通过loader(加载器)和 ...
webpack打开项目命令_webpack前端模块打包工具基本使用的详细记录（一）
webpack简介我们都知道,Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等 ...
前端开发打包工具——webpack（1）
什么是webpack? webpack 是一个打包模块化 javascript 的工具,在webpack 里一切文件皆模块,通过 loader 转换文件,通过 plugin 注入钩子,最后输出由多个模 ...
为何webpack风靡全球？三大主流模块打包工具对比
小编说:前端项目日益复杂,构建系统已经成为开发过程中不可或缺的一个部分,而模块打包(module bundler)正是前端构建系统的核心.Webpack能成为最流行的打包解决方案,并不是偶然.webp ...
前端打包工具-webpack和rollup的区别
开门见山 2017年4月初,Facebook 将一个巨大的 pull 请求合并到了 React 主分支(master) 中,将其现有的构建流程替换为基于 Rollup ,这一举动促使一些人发很 ...
前端打包工具webpack和Vite
我们见证了 webpack.Rollup 和 Parcel 等工具的变迁,它们极大地改善了前端开发者的开发体验. 但当我们开始构建越来越大型的应用时,通常需要很长时间才能启动开发服务器,文件修改后的效 ...
五分钟学会前端打包工具webpack
可以做的事情代码转换.文件优化.代码分割.模块合并.自动刷新.代码校验.自动发布最终目的 webpack的基本配置 webpack的高级配置 webpack的优化策略 ast抽象语法树 webpa ...
【模块打包工具】Webpack
Webpack的出现使得前端模块化的范围扩大了许多以前只是 JS 模块化而现在是前端模块化包括样式图片字体等所有的资源模块化核心特性 1.可以通过webpack 模块打包器 b ...

前端模块打包工具--webpack

webpack打包：loader资源加载器

webpack基本使用

webpack配置文件：webpack.config.js

打包js文件

loader资源加载器处理文件

webpack模块加载方式（导入资源文件）

webpack与ES6：配置加载器转换ES6新特性

前端模块打包工具--webpack相关推荐

最新文章

热门文章