webpack
文章平均质量分 84
webpack从基础到实践
草木红
这个作者很懒,什么都没留下…
展开
-
22. webpack resolve配置路径别名
当文件路径比较深时,使用相对路径就不方便。可以通过配置resolve.alias用全局变量名来代替具体路径。(一) 配置路径别名修改webpack配置文件module.exports = { ... resolve:{ alias:{ $base: path.resolve(__dirname,'src/js/base'), } }}在入口文件index.js文件中//引入 /src/js/base/base.js文件原创 2020-08-19 15:05:13 · 551 阅读 · 0 评论 -
21. webpack优化配置-dll方式将第三方库独立打包
对于一些不经常更新的第三方库,比如 jquery,react,lodash,我们希望能和自己的代码分离开,DLLPlugin 能把第三方代码完全分离开,即每次只打包项目自身的代码,而不再打包第三方库。使用到的插件:webpck.DllReferencePlugin(属于webpack):设置哪些第三方库不参与打包add-asset-html-webpack-plugin:将JavaScript或者CSS文件添加到 HTML中下载插件npm i webpack add-asset-html-原创 2020-08-19 11:47:06 · 664 阅读 · 0 评论 -
20. webpack优化配置-externals 不打包某些库使用CDN代替
当我们希望使用CDN来引入jquery时,就不需要在打包时将jQuery打包。配置webpack配置文件webpack.config.js,添加externals配置const path = require('path');const {CleanWebpackPlugin} = require('clean-webpack-plugin');const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {原创 2020-08-19 10:21:07 · 589 阅读 · 0 评论 -
19. webpack优化配置-PWA 渐进式网络应用开发程序
渐进式网络应用程序(Progressive Web Application - PWA),在离线(offline)时应用程序能够继续运行功能。https://www.webpackjs.com/guides/progressive-web-application/serviceWorker代码必须运行在服务器上需要的插件:workbox-webpack-plugin下载插件workbox-webpack-pluginnpm i workbox-webpack-plugin -D在web原创 2020-08-19 09:53:36 · 168 阅读 · 0 评论 -
18.webpack优化配置-懒加载和预加载
(一) 懒加载原创 2020-08-19 09:06:00 · 1577 阅读 · 0 评论 -
17.webpack优化配置-code split 代码分割
方式一:通过多入口实现代码分割配置webpack, 将单入口,改为多入口注意:index.js文件不要引入base.js文件const path = require('path');module.exports = { mode: 'production', entry: { index: './src/js/index.js', base: './src/js/base.js' }, output: { filena原创 2020-08-18 17:41:13 · 733 阅读 · 0 评论 -
16. webpack优化配置-tree shaking 剔除无用的代码
tree shaking只需注意下面的前提即可,无需其他配置。前提: 1. 必须使用ES6模块化 2.webpack配置文件中的mode开启production环境注意:package.json文件添加sideEffects配置来实现哪些文件需要进行tree shaking。“sideEffects”:false 所有代码都可以进行tree shaking,css文件可能直接被删除。“sideEffects”:["*.css"] css文件不要进行tree shaking入口文件inde原创 2020-08-18 16:47:53 · 914 阅读 · 0 评论 -
15. webpack优化配置-babel缓存和资源缓存配置
开启babel缓存,在第二次打包时,打包构建速度更快在webpack配置文件webpack.config.js中开启babel缓存module.exports = { ... module: { rules: [ ... //js兼容性处理 { test: /\.js$/, exclude: /node_modules/, loader: 'ba..原创 2020-08-18 16:23:24 · 1265 阅读 · 0 评论 -
14. webpack优化配置-oneOf
转载:https://segmentfault.com/a/1190000022413668优化点: 每个不同类型的文件在loader转换时,都会被命中,遍历module中rules中所有loaderconst { resolve } = require('path');const MiniCssExtractPlugin = require('mini-css-extract-plugin');const HtmlWebpackPlugin = require('html-webpack-plug转载 2020-08-18 15:29:35 · 399 阅读 · 0 评论 -
13. source-map构建后的代码与源码的映射关系
source-map:提供源代码到构建后代码的映射技术(如:构建后代码出错,通过映射关系可以方便的追踪源代码中的错误)[ inline- | hidden- | eval- ][ nosources- ][ cheap- [ module- ]]source-mapsource-map: 会生成一个外部的source-map文件,当文件出错时,能够得到错误代码准确信息和源代码的错误位置。inline-source-map:将source-map内联到js文件中,只生成一个内联的source-map,原创 2020-08-18 15:19:12 · 483 阅读 · 0 评论 -
12.webpack 模块热替换HMR
HMR(hot module replacement) 一个模块发生变化时,只会重新打包这一个模块(而不是打包所有模块)极大的提升构建速度。HMR功能基于devServer。样式文件:可以使用HMR功能:因为style-loder内部已经实现js文件:默认不能使用HMR功能,在js入口文件添加支持HMR功能的代码后,修改非入口文件时可以实现热更新。html文件:默认不能使用HMR功能,同时会导致html文件不能热更新(在单页面开发中不需要做HMR功能)解决方法:修改entry入口,将html文原创 2020-08-18 14:35:55 · 136 阅读 · 0 评论 -
11. webpack生产环境和开发环境中的配置文件
(一) 开发环境webpack.config.js文件const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { mode: 'production', entry: './src/index.js', output: { filename: 'built.js', path: path.r原创 2020-08-17 17:45:37 · 122 阅读 · 0 评论 -
10. webpack压缩html和js
需要的loader和插件html-webpack-plugin 插件中进行配置即可压缩html(一) 压缩js代码只需将 webpack的配置文件webpack.config.js中的mode改为生产环境即可自动压缩js代码....module.exports = { mode: 'production', ...}(二) 压缩html只需将 webpack的配置文件webpack.config.js中的mode改为生产环境即可自动压缩html代码这时可能报一个如下的错原创 2020-08-17 17:45:13 · 695 阅读 · 0 评论 -
7. webpack 将css从js中抽离、css兼容性处理、css压缩
需要的loader/插件style-loadercss-loaderhtml-webpack-pluginmini-css-extract-plugin 将css提取成一个单独的文件postcss-loader css兼容性处理postcss-preset-env 识别postcss所在的环境optimize-css-assets-webpack-plugin 插件,压缩css(一) 将css从js文件中抽离安装mini-css-extract-pluginnpm i mini-原创 2020-08-17 17:44:45 · 568 阅读 · 0 评论 -
8. webpack的js语法检查eslint
需要的插件、loadereslint-loader 语法检查eslit eslit语法库eslint-config-airbnb-base aribnb语法规则eslint-plugin-import安装eslint和相关规则npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D在入口文件src/index.js中添加如下内容function add(a,b){ retur原创 2020-08-17 17:44:16 · 221 阅读 · 0 评论 -
9. webpack的js兼容性处理
使用的loader、插件babel-loader Babel是一个JavaScript编译器,能够让我们放心的使用新一代JS语法。@babel/preset-env js基本语法转换@babel/core js的api进行转换@babel/polyfill js全部兼容性处理,不需要配置,直接引入,会有体积过大的问题core-js 按需进行兼容性处理根据自己的需求安装loader和插件npm i babel-loader @babel/preset-env @babel/core原创 2020-08-17 17:43:58 · 334 阅读 · 0 评论 -
6. devServer自动打包和自动刷新页面
https://webpack.docschina.org/configuration/dev-server/特点:只会在内存中编译打包,不会有任何输出下载webpack-dev-servenpm i webpack-dev-server -D在webpack配置文件webpack.config.js中进行配置devServer:{ //项目构建后的路径 contentBase: path.resolve(__dirname, 'build'), //启动gzip压缩.原创 2020-08-14 16:32:44 · 267 阅读 · 0 评论 -
5. webpack处理不需要处理的资源(如字体图标)
以打包字体图标为例使用的loader:file-loader图标库是阿里图标库下载的下载file-loader (还需要安装html-webpack-plugin,css-loader, style-loader)npm i file-loader -D创建入口文件(src/index.js)并引入图标库的入口文件import './css/iconfont.css'创建模板文件(src/index.html)<p class="iconfont icon-shan原创 2020-08-14 16:32:27 · 391 阅读 · 0 评论 -
4. webpack处理图片资源
file-loader、url-loader、html-loader学习原创 2020-08-14 16:32:02 · 508 阅读 · 0 评论 -
3.html-webpack-plugin 使用自己的html模板
插件需要引入才能使用。打包html所需的插件html-webpack-plugin: 打包结束后,默认自动生成一个html文件,并把打包生成的js/css自动引入到html文件中更多配置:https://github.com/jantimon/html-webpack-plugin#configuration安装 html-webpack-plugin 插件npm i html-webpack-plugin -D在webpack配置文件webpack.config...原创 2020-08-14 16:31:35 · 499 阅读 · 0 评论 -
2.webpack打包样式(css、less、sass)资源
常用的样式loaderstyle-loader : 将css样式加载到页面的标签里面css-loader: 解析( @import 和 url() ,会 import/require() 后再解析(resolve)它们。less-loader: 解析less语法postcss-loader: 添加css前缀,需要在项目根目录下新建postcss.config.js文件,进行相关配置。(一) 处理css文件在src文件夹中创建index.js文件,base.css文件,并在index.js原创 2020-08-14 16:31:14 · 315 阅读 · 0 评论 -
3. tree shaking、code splitting、splitchunksplugin、shimming等
(一) Tree shakinghttps://www.webpackjs.com/guides/tree-shaking/使用tree shaking 可以将没有使用的模块、方法、文件不进行打包,但是tree shaking只支持ES Module 引入的方式 (module.exports import from)在webpack.config.js文件中进行配置https://webpack.docschina.org/configuration/optimization/在packa原创 2020-07-07 10:22:21 · 433 阅读 · 0 评论 -
2.webpack与Loader、plugins、sourceMap和babel等
(一) webpack与Loaderhttps://www.webpackjs.com/loaders/https://blog.csdn.net/kouzuhuai2956/article/details/106119674webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。[1]. Loader打包静态资源(图片)https://www.webpackjs.com/loa原创 2020-07-06 10:35:51 · 526 阅读 · 0 评论 -
1.webpack基础
commonJS, ES6 module , 安装webpack, webpack 配置原创 2020-07-02 17:22:35 · 2815 阅读 · 0 评论