WebPack
winpanys
这个作者很懒,什么都没留下…
展开
-
Webpack实战配置案例(二)
EsLint 在 Webpack 中的配置//安装eslint工具,规范项目中的代码npm i eslint -Dnpm i babel-eslint -Dnpm i eslint-loader -D//快速生成eslint配置npx eslint --init在 .eslintrc.js 中:module.exports = { "extends": "air...转载 2020-04-23 14:03:32 · 550 阅读 · 0 评论 -
Webpack实战配置案例(一)
Library的打包:库代码通过webpack进行打包在 webpack.config.js 中:const path = require('path');module.exports = { mode: 'production', entry: './src/index.js', externals: 'lodash', output: { ...原创 2020-04-21 10:31:54 · 423 阅读 · 0 评论 -
WebPack进阶 (环境变量的使用)
只需要一个common.js文件通过在package.json中传递不同的参数,区分是开发环境还是生产环境。在 package.json 中:{ "name": "haiyang", "sideEffects": [ "*.css" ], "version": "1.0.0", "description": "", "main": "index.js",...转载 2020-04-20 10:07:50 · 377 阅读 · 0 评论 -
Webpack进阶 (浏览器缓存(Caching)与Shimming (垫片))
在 webpack.common.js 中:const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = { ent...转载 2020-04-20 09:59:09 · 238 阅读 · 0 评论 -
Webpack进阶(css文件代码分割)
在 webpack.config.js 中module.exports = { entry: { main: './src/index.js' }, module: { }, plugins: [], optimization: { splitChunks: { chunks...转载 2020-04-15 19:56:08 · 272 阅读 · 0 评论 -
Webpack进阶(Lazy Loading ,打包分析,Preloading,Prefetching)
Lazy Loading 懒加载,Chunk是什么?用户当前需要用什么功能就只加载这个功能对应的代码,也就是所谓的按需加(异步加载)载在给单页应用做按需加载优化时,一般采用以下原则:对网站功能进行划分,每一类一个chunk 对于首次打开页面需要的功能直接加载,尽快展示给用户 某些依赖大量代码的功能点可以按需加载 被分割出去的代码需要一个按需加载的时机每一个文件就是一个 chun...转载 2020-04-15 19:18:58 · 320 阅读 · 0 评论 -
WebPack进阶(Webpack和Code Splitting)
安装:npm i lodash --save npm i babel-plugin-dynamic-import-webpack -D代码分割,和webpack无关,为了提升性能webpack中实现代码分割,两种方式:第一种方法:同步代码: 只需要在webpack.common.js中做optimization的配置即可第二种方法:异步代码(import): 异步代码,...转载 2020-04-14 16:22:34 · 145 阅读 · 0 评论 -
Webpack进阶(Tree shaking Dev和Prod区分打包 )
Tree Shaking:只支持 ES Module 例如import和export的静态结构特性的引入。当引入一个模块时,不引入所有的代码,只引入需要的代码在 webpack.config.js 中:const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');co...转载 2020-04-14 11:19:10 · 617 阅读 · 0 评论 -
webpack学习记录(三)--使用 Babel 处理 ES6/7 语法 转义为ES5
BABEL官网:https://babeljs.io/setup安装依赖包:npm i babel-loader @babel/core @babel/preset-env -D//生产依赖,兼容低版本浏览器npm install --save @babel/polyfill# 在 webpack.config.js 中# @babel/preset-env这个包官方说是...转载 2020-04-13 20:07:06 · 1328 阅读 · 0 评论 -
webpack学习记录(二-下)Plugin,SourceMap,WebpackDevServer, HMR
plugin : 可以在webpack运行到某个时刻的时候,帮你做一些事情使用plugins让打包更便捷HtmlWebpackPlugin :htmlWebpackPlugin 会在打包结束后,自动生成一个html文件,并把打包生成的js自动引入到这个html文件中安装:npm i html-webpack-plugin -D基本用法:在 webpack.config.js 中:...转载 2020-04-13 19:41:17 · 182 阅读 · 0 评论 -
webpack学习记录(二-上)
二:Webpack核心概念转载 2020-04-13 17:13:49 · 115 阅读 · 0 评论 -
webpack学习记录(一)
什么是 webpack ?本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。打包所有的资源,包括样式,脚本,图片等等。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。webpack 就像一条...转载 2020-04-13 16:23:28 · 119 阅读 · 0 评论