Webpack
scorpio_h
这个作者很懒,什么都没留下…
展开
-
Webpack核心概念
1、Entry:入口,Webpack执行构建的第一步将从Entry开始,可抽象为输入。2、Module:模块,将Webpack里一切皆模块,一个模块对应一个文件,Webpack会从配置的Entry开始递归出所有依赖的模块。3、Chunk:代码块,一个Chunk由多个模块组成,用于代码合并且分割。4、Loader:模块转化器,用于将模块的原内容按需转化为新内容。5、Plugin:扩展...原创 2018-06-29 16:02:58 · 728 阅读 · 0 评论 -
webpack打包组件和基础库
webpack除了打包应用,也可以用来打包js库需要打包压缩版和非压缩版本 支持 AMD/CJS/ESM 模块引入如何将库暴露出去?library:指定库的全局变量 libraryTarget:支持库引入的方式1、新建项目,并安装webpack和wbpack-clinpm init -ynpm i webpack webpack-cli -D2、新建目录 src/i...原创 2019-06-28 00:32:04 · 3146 阅读 · 0 评论 -
webpack之提取页面公共资源(SplitChunksPlugin)
利用SplitChunksPlugin进行公共脚本分离,Webpack4内置的,替代CommonsChunkPlugin插件。chunks参数说明:async:异步引入的哭进行分离(默认)initial:同步引入的库进行分离all:所有引入的库进行分离minChunks:设置最小引入次数为2次minSize:分离的包体积的大小一、引入插件npm i html-we...原创 2019-06-24 23:21:24 · 3012 阅读 · 0 评论 -
webpack之与Eslint结合
Eslint有多种团队规范,例如:Airbnb、alloyteam、ivweb此处主要以Airbnb为例,使用eslint-loader,构建时检查JS规范1、安装eslint依赖(此处以react开发环境为例,vue等其他开发环境有所不同,参考:https://www.npmjs.com/package/eslint-config-airbnb)npm ieslint, eslin...原创 2019-06-25 23:38:23 · 449 阅读 · 0 评论 -
webpack之代码分割和动态import
1、安装babel插件npm install @babel/plugin-syntax-dynamic-import --save-dev2、添加配置.babelrc(ES6: 动态import目前还没有原生支持,需要babel转换){ "plugins": ["@babel/plugin-syntax-dynamic-import"], ...}结果如下所...原创 2019-06-25 21:40:27 · 950 阅读 · 0 评论 -
webpack之摇树优化(tree shaking)
tree shaking主要作用是打包项目时会将不用到的方法不打包入项目中,这样得以优化项目体积。主要原理:利用ES6模块的特点:只能作为模块顶层的语句出现import 的模块名只能是字符串常量import binding 是 immutable的代码擦除:uglify阶段删除无用代码使用方法很简单,webpack配置中的wbpack.prod.js中只需要设置 ...原创 2019-06-25 20:54:14 · 2960 阅读 · 0 评论 -
webpack之css自动转rem(px2rem-loader)
主要是使用 px2rem-loader 插件配合lib-flexible来实现1、安装px2rem-loadernpm i px2rem-loader -D2、配置px2rem-loader { loader: 'px2rem-loader', ...原创 2019-06-17 23:52:14 · 3446 阅读 · 0 评论 -
webpack之自动补齐css前缀,增强项目兼容性(postcss-loader autoprefixer)
通过 postcss-loader 和 autoprefixer 两款插件实现1、安装两款插件npm i postcss-loader autoprefixer -D2、在webpack.prod.js中加入以下配置 { test: /.less$/, use: [ ...原创 2019-06-17 23:27:22 · 3011 阅读 · 0 评论 -
webpack打包时如何转化图片和字体(file-loader url-loader)
主要有两种方式,一种是file-loader,还有一种是url-loader先看下file-loader:通过 npm i file-loader -D 安装配置文件如下:'use strict'const path = require('path')module.exports = { mode: 'production', entry: { index...原创 2019-06-04 22:45:40 · 1217 阅读 · 0 评论 -
webpack如何解析less?(less-loader、css-loader、style-loade)
主要通过less-loader、css-loader、style-loader插件作用less-loader:用于加载.less文件,将less转化为csscss-loader:用于加载.css文件,将css转化为commonjsstyle-loader: 将样式通过<style>标签插入到head中先安装这几款插件npm i style-loader css-l...原创 2019-06-04 22:08:40 · 8822 阅读 · 0 评论 -
webpack之多页面应用打包通用方案(glob)
使用glob来处理1、安装globnpm i glob -D2、项目处理,将代码放在src目录下,例如此处就拆分为两个项目,分别为index和search,index和search文件夹下入口文件必需使用index作为文件名3、在webpack.prod.js配置文件下进行如下主要操作,代码中有一些无关的插件'use strict';const glob = req...原创 2019-06-18 23:43:42 · 2797 阅读 · 1 评论 -
webpack之静态资源内联(raw-loader)
主要是用 raw-loader来实现静态资源内联1、安装raw-loader(此处使用比较老的版本 0.5.1 来实现)npm i raw-loader@0.5.1 -D2、假设项目为移动端项目,需要使用lib-flexible来做适配处理一般使用方法是直接将lib-flexible内联进index.html此处我们改使用raw-loader来处理<!DOCTYP...原创 2019-06-18 23:02:01 · 10307 阅读 · 0 评论 -
webpack之优化构建时命令行的显示日志(stats、friendly-errors-webpack-plugin)
这里介绍两种方法,1、是webpack的stats的优化方式 2、利用friendly-errors-webpack-plugin插件优化日志1、webpack的stats的优化方式主要有以下几个配置参数:默认情况下是verbose,也就是全部输出,此刻我们将他改为“errors-only”方式,这个比较简单,只需要在开发环境和生产环境的webpack.dev.js和webp...原创 2019-07-03 22:49:29 · 5526 阅读 · 0 评论