![](https://img-blog.csdnimg.cn/20190519130846589.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
webpack学习
小白一枚,学习webpack
仇益阳
技术无罪
展开
-
webpack之代码分割和动态important
webpack之代码分割和动态important 代码分割的意义 懒加载的加载模式 如何动态使用important原创 2019-07-08 14:33:21 · 318 阅读 · 0 评论 -
webpack之tree shaking(摇树优化)
webpack之tree shaking(摇树优化) 在webpack.config.js中mode=‘none’时,默认关闭 在webpack.config.js中mode=‘production’时,默认开启 只会注入已使用的函数,未使用的函数不会注入到bundel.js中 ...原创 2019-06-13 11:34:58 · 1114 阅读 · 0 评论 -
webpack之代码分割的意义
webpack之代码分割的意义 代码分割的意义 懒加载 JS 脚本的⽅式 如何使⽤动态 import? 代码分割的效果原创 2019-07-01 17:25:29 · 795 阅读 · 0 评论 -
webpack之scope hoisting
webpack之scope hoisting 现象:构建后的代码存在⼤量闭包代码 会导致的问题 模块转换分析 进⼀步分析 webpack 的模块机制 scope hoisting 原理 scope hoisting 使⽤ ...原创 2019-07-01 16:25:22 · 791 阅读 · 1 评论 -
webpack之分离公共包
webpack之分离公共包 安装html-webpack-externals-plugin 引入并使用插件 const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin') // new HtmlWebpackExternalsPlugin({ // exter...原创 2019-06-13 10:28:06 · 1755 阅读 · 0 评论 -
webpack之使用source map
webpack之使用source map source map关键字 eval:使用eval包裹模块代码 source map:产生.map文件 cheap:不包含列信息 inline:将.map作为DataURl嵌入,不单独生成.map文件 module:包含loader的sourcemap 在开发模式的配置文件中加上以下代码` devtool:'eval' ...原创 2019-06-11 11:47:31 · 547 阅读 · 0 评论 -
webpck之多页面应用打包通用方案
webpck之多页面应用打包通用方案 利用glob插件 glob.sync entry:glob.sync(path.join(_dirname,’./src/*/index.js’)), 在webpack配置文件中写入以下代码配置 const setMAP = () => { const entry = { }; const HtmlWebpackPlug...原创 2019-06-11 11:30:56 · 303 阅读 · 0 评论 -
webpack之静态资源内联
webpack之静态资源内联 HTML内联使用raw-loader原创 2019-06-11 09:40:11 · 1070 阅读 · 4 评论 -
webpack之移动端 css px自动转换成rem
webpack之移动端 css px自动转换成rem 安装lib-flexible,px2rem-loader 然后引入配置原创 2019-06-10 15:50:47 · 812 阅读 · 0 评论 -
webpack之autoprefixer自动添加厂商前缀
webpack之autoprefixer自动添加厂商前缀 安装postcss-loader autoprefixer插件 在webpack配置文件中添加一下代码 { loader: 'postcss-loader', options: { plugins: () => [ re...原创 2019-06-10 15:31:05 · 1190 阅读 · 0 评论 -
webpack之自动清理构建目录产物
webpack之自动清理构建目录产物 手动清理 rm -rf ./dist 使用clean-webpack-plugin插件原创 2019-06-10 15:16:07 · 467 阅读 · 0 评论 -
webpack之HTML、css和js代码压缩
webpack之HTML、css和js代码压缩 js文件的压缩内置压缩 css文件的压缩 html文件压缩原创 2019-06-10 15:10:09 · 1250 阅读 · 0 评论 -
webpack文件指纹配置
webpack文件指纹配置 主要用于做版本版本管理 文件如何生成? Hash,Chunkhash,Contenthash js文件指纹设置 css文件指纹设置 图片或文件指纹设置原创 2019-06-10 14:29:09 · 508 阅读 · 0 评论 -
webpack热更新
webpack热更新 热更新:webpack-dev-server WDS不刷新浏览器,而是放在内存中 使用HotModuleReplacementPlugin插件 在webpacj.config.js中引入webpack,代码如下 const webpack=require('webpack'); 引入webpack自带热更新插件,代码如下 //先引入webpack const w...原创 2019-06-10 14:15:42 · 652 阅读 · 0 评论 -
webpack文件监听
webpack文件监听 启动webpack命令时带上–watch 在配置webpack.config.js文件时设置watch:true原创 2019-06-10 13:54:03 · 1243 阅读 · 1 评论 -
解析图片和文字
解析图片和文字 安装file-loader 在webpack.config.js中module中添加以下代码 { test:/.(png|jpg|gif|jpeg)$/, user: 'file-loader' }, { test:/.(wo...原创 2019-06-10 10:45:41 · 1837 阅读 · 0 评论 -
解析CSS,less和sass
解析CSS,less和sass 安装css-loader,style-loader,less-loader 在webpack.config.js里module里添加以下代码 { test: /.css$/, use: [ 'style-loader', ...原创 2019-06-10 10:32:40 · 629 阅读 · 0 评论 -
webpack解析react jsx
webpack解析react jsx 安装react babel-preset-react npm i react react-dom @babel/preset-react -D 在.babelrc文件增加 “@babel/preset-react”,原创 2019-06-06 17:44:51 · 1188 阅读 · 0 评论 -
webpack之解析ES6
webpack之解析ES6 首先安装npm i @babel/core @babel/preset-env babel-loader -D 然后在项目根目录下创建一个.babelrc文件 在.babelrc下增加babel preset配置 { "presets":[ "@babel/preset-env" ] } 在webpack.config.js中...原创 2019-06-06 15:38:46 · 789 阅读 · 0 评论 -
webpack之mode
webpack之mode原创 2019-06-06 15:21:12 · 1600 阅读 · 0 评论 -
webpack之Plugins
webpack之Plugins原创 2019-06-06 14:13:56 · 523 阅读 · 0 评论 -
webpack之Loaders
webpack之Loaders原创 2019-06-06 14:10:38 · 647 阅读 · 0 评论 -
webpack核心概念之output
webpack核心概念之output原创 2019-06-06 14:06:51 · 493 阅读 · 0 评论 -
webpack基础用法
webpack基础用法 核⼼概念之 Entry Entry ⽤来指定 webpack 的打包⼊⼝原创 2019-06-06 13:58:35 · 214 阅读 · 0 评论 -
通过npm script运行webpack
通过npm script运行webpack 在package.json里 添加以下代码 "build":"webpack"原创 2019-06-06 11:21:13 · 665 阅读 · 0 评论 -
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...原创 2019-06-05 15:09:45 · 498 阅读 · 0 评论 -
如何安装webpack?
如何安装webpack?原创 2019-06-05 14:23:09 · 164 阅读 · 0 评论 -
webpack配置文件
webpack配置文件 webpack默认配置文件:webpack.config.js 可以通过webpack --config指定配置文件原创 2019-06-05 14:09:21 · 177 阅读 · 0 评论 -
webpack
webpack 为什么要深入掌握webpack? 应用场景不同,node的繁荣,三大框架的构建工具的转换 代码优化,跨端应用 webpack一切皆为模块 难度适中,学习成本大 工程化思维 ...原创 2019-06-05 11:20:17 · 160 阅读 · 0 评论 -
如何配置一个高扩展性的路由
如何配置一个高扩展性的路由 nprogress插件可以看到页面切换进度,在路由守卫中使用 start()开始 done()结束原创 2019-06-03 15:06:32 · 193 阅读 · 0 评论 -
自定义webpack和babel配置
自定义webpack和babel配置 用less时可能会出现报错信息,这时候我们需要配置babel配置:1.可以将less降到3.0版本一下;2.配置less,开启javascript { loaderl:'less-loader', options:{ javascriptEnabled:true } } 新建一个Vue.config.js 具体可打开链接vue...原创 2019-06-03 13:47:29 · 168 阅读 · 0 评论