仇益阳的博客

webpack之代码分割和动态important代码分割的意义懒加载的加载模式如何动态使用important

webpack之tree shaking（摇树优化）在webpack.config.js中mode=‘none’时，默认关闭在webpack.config.js中mode=‘production’时，默认开启只会注入已使用的函数，未使用的函数不会注入到bundel.js中...

webpack之代码分割的意义代码分割的意义懒加载 JS 脚本的⽅式如何使⽤动态 import?代码分割的效果

webpack之scope hoisting现象：构建后的代码存在⼤量闭包代码会导致的问题模块转换分析进⼀步分析 webpack 的模块机制scope hoisting 原理scope hoisting 使⽤...

webpack之分离公共包安装html-webpack-externals-plugin引入并使用插件 const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin') // new HtmlWebpackExternalsPlugin({ // exter...

webpack之使用source mapsource map关键字eval：使用eval包裹模块代码source map：产生.map文件cheap：不包含列信息inline：将.map作为DataURl嵌入，不单独生成.map文件module：包含loader的sourcemap在开发模式的配置文件中加上以下代码` devtool:'eval'...

webpck之多页面应用打包通用方案利用glob插件glob.syncentry：glob.sync(path.join(_dirname,’./src/*/index.js’)),在webpack配置文件中写入以下代码配置const setMAP = () => { const entry = { }; const HtmlWebpackPlug...

webpack之静态资源内联HTML内联使用raw-loader

webpack之移动端 css px自动转换成rem安装lib-flexible，px2rem-loader然后引入配置

webpack之autoprefixer自动添加厂商前缀安装postcss-loader autoprefixer插件在webpack配置文件中添加一下代码 { loader: 'postcss-loader', options: { plugins: () => [ re...

webpack之自动清理构建目录产物手动清理rm -rf ./dist使用clean-webpack-plugin插件

webpack之HTML、css和js代码压缩js文件的压缩内置压缩css文件的压缩html文件压缩

webpack文件指纹配置主要用于做版本版本管理文件如何生成？Hash，Chunkhash，Contenthashjs文件指纹设置css文件指纹设置图片或文件指纹设置

webpack热更新热更新：webpack-dev-serverWDS不刷新浏览器，而是放在内存中使用HotModuleReplacementPlugin插件在webpacj.config.js中引入webpack，代码如下const webpack=require('webpack');引入webpack自带热更新插件，代码如下//先引入webpackconst w...

webpack文件监听启动webpack命令时带上–watch在配置webpack.config.js文件时设置watch:true

解析图片和文字安装file-loader在webpack.config.js中module中添加以下代码 { test:/.(png|jpg|gif|jpeg)$/, user: 'file-loader' }, { test:/.(wo...

解析CSS，less和sass安装css-loader,style-loader,less-loader在webpack.config.js里module里添加以下代码 { test: /.css$/, use: [ 'style-loader', ...

webpack解析react jsx安装react babel-preset-react npm i react react-dom @babel/preset-react -D在.babelrc文件增加 “@babel/preset-react”,

webpack之解析ES6首先安装npm i @babel/core @babel/preset-env babel-loader -D然后在项目根目录下创建一个.babelrc文件在.babelrc下增加babel preset配置{ "presets":[ "@babel/preset-env" ]}在webpack.config.js中...

webpack之mode

webpack之Plugins

webpack之Loaders

webpack核心概念之output

webpack基础用法核⼼概念之 EntryEntry ⽤来指定 webpack 的打包⼊⼝

通过npm script运行webpack在package.json里添加以下代码"build":"webpack"

webpack打包简单例子安装node查看node版本，node-v，查看npm版本，npm-v创建一个新文件夹 mkdir my-project打开文件夹cd my-project初始化项目 npm init -y初始化webpack npm install webpack webpack-cli --save-dev\查看webpack版本 ./no...

如何安装webpack？

webpack配置文件webpack默认配置文件：webpack.config.js可以通过webpack --config指定配置文件

webpack为什么要深入掌握webpack？应用场景不同，node的繁荣，三大框架的构建工具的转换代码优化，跨端应用webpack一切皆为模块难度适中，学习成本大工程化思维...

如何配置一个高扩展性的路由nprogress插件可以看到页面切换进度，在路由守卫中使用start()开始done()结束

自定义webpack和babel配置用less时可能会出现报错信息，这时候我们需要配置babel配置：1.可以将less降到3.0版本一下；2.配置less，开启javascript{ loaderl:'less-loader', options:{ javascriptEnabled:true } }新建一个Vue.config.js具体可打开链接vue...