webpack学习笔记 ——篇2
插件整理
extract-text-webpack-plugin |
用于将css/less/sass等文件单独打包 https://webpack.docschina.org/plugins/extract-text-webpack-plugin/#src/components/Sidebar/Sidebar.jsx |
1.引入 2.配置loader style-loader用于为css包一层Js,以插入到html中,这里不用。 3.定义插件 打包好的css即为styles.css |
vue-loader |
https://vue-loader.vuejs.org/guide/#manual-configuration |
|
cross-env |
用于跨平台设置环境变量,比如process.env.NDOE_ENV,以根据不同的值进行不同的配置 https://www.npmjs.com/package/cross-env |
1.安装:npm i cross-env --save-dev 2.package.json脚本中配置命令: 相当于:通过cross-env设置proccess.env.NODE_ENV为development,并运行webpack命令。 |
webpack.DefinePlugin |
用于在业务代码中,和在webpack编译过程中,设置全局变量; vue、react等包括好几个版本(比如开发版本会包含很多错误提示等),webpack根据这些变量名确定该打包哪个版本。 https://webpack.docschina.org/plugins/define-plugin/ 注意:cross-env是设置node运行环境中的process对象,但在业务代码中(比如main.js)无发判断这个值, 这个插件将这个值配置到业务代码的全局环境中。 |
1.引入webpack 2.配置插件 |
stylus-loader |
用于编写stylus格式css(相应于less/sass) |
1.安装stylus-loader 2.配置 {
test: /\.styl/,
use: ["style-loader","css-loader",
"stylus-loader"]
},
|
autoprefixer |
用于自动添加css前缀,不用写-webkit-/-moz-等一大串。 postcss-loader用于对翻译好的css进行优化,通过一些插件完成,autoprefixer就是其中一个。 |
1.创建postcss.config.js并配置: 2. |
babel-loader |
处理vue中的jsx格式 |
1.下载babel-core/babel-loader/babel-preset-env/babel-plugin-transform-vue-jsx 2.配置babel,创建.babelrc 3.配置webpack.config.js |
optimization.splitChunks |
用于分离第三方库 |
|
rimraf |
用于删除目录的工具包 注意:直接在cmd命令行执行: rimraf dist 提示rimraf不识别,需要在package.json中配置命令并通过npm run ***执行 |
|
babel-preset-stage-1 |
用于识别es6等更高级语法,或还在草案中的语法,比如对象扩展符号... |
1.npm install babel-preset-stage-1 --save-dev 2..babelrc文件中presets数组中添加"stage-1" |
vue-server-renderer |
vue服务端渲染必需的插件,生成独立的json,用于配置复杂的逻辑。正因有这个插件,vue的服务端渲染比react容易 |
|
koa-router |
kou中间件,帮助koa处理路由信息 |
|
axios |
用于应用向服务端发送请求 |
|
memory-fs |
和node中的fs基本相同,唯一区别:对于读取的文件,node中的fs存到磁盘上,memory-fs存到内存 |
|
optimize-css-assets-webpack-plugin |
用于压缩extract-text-webpack-plugin生成的css文件 |
1.引入 2.配置 |
cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js
命令对应的开发环境下配置:
不设置hot:true,会是页面整体更新,已经写进去的数据也会没有,
设置后,只是有改动的模块更新。
webpack学习笔记 ——篇2的更多相关文章
- webpack学习笔记(二)-- 初学者常见问题及解决方法
这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解 ...
- 【原】webpack学习笔记
之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...
- 更博不能忘——webpack学习笔记
webpack是前端构建系统就像grunt和gulp(之前有学习过grunt所以也就大概明白webpack是个什么东西),所以说前端技术大部分还真是相通的,现在觉得当时多看的东西并不白费,虽然长时间不 ...
- webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件
一 .webpack学习环境准备: 1:window系统 2:安装node.js 官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...
- Webpack学习笔记九 webpack优化总结
webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, ...
- Webpack学习笔记一:What is webpack
#,Loaders干嘛的,webpack can only process JavaScript natively, but loaders are used to transform other ...
- webpack学习笔记—webpack安装、基本配置
文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...
- 【webpack学习笔记(一)】流行的前端模块化工具webpack初探
从开发文件到生产文件 有一天我突然意识到一个问题,在使用react框架搭建应用时,我使用到了sass/less,JSX模版以及ES6的语法在编辑器下进行开发,使用这些写法是可以提高开发的效率.可是 ...
- webpack学习笔记——sourcemap(使用webpack打包的项目如何调试代码)
[webpack]devtool里的7种SourceMap模式是什么鬼? 里面详细介绍了7种模式的区别,和建议使用. webpack sourcemap 选项多种模式的一些解释 两篇文章大同小异,第一 ...
随机推荐
- rematch:当你受不了redux繁琐写法的时候,是时候了解一波rematch了
前言: 前段时间学习完react后,刚好就接到公司一个react项目的迭代,顺便巩固一下前段时间的学习成果.项目使用的是redux+react-router,将所有的数据都放在redux中,异步处理数 ...
- 算法笔记--次小生成树 && 次短路 && k 短路
1.次小生成树 非严格次小生成树:边权和小于等于最小生成树的边权和 严格次小生成树: 边权和小于最小生成树的边权和 算法:先建好最小生成树,然后对于每条不在最小生成树上的边(u,v,w)如果我们 ...
- js判断输入的input内容是否为数字
有时候我们输入的input的内容需要判断一下是否是数字,所以为了更好的客户体验,在前端先处理一下: <input type="text" name="val&quo ...
- Cache Line
转载: https://yq.aliyun.com/articles/46550
- A*算法介绍
你是否在做一款游戏的时候想创造一些怪兽或者游戏主角,让它们移动到特定的位置,避开墙壁和障碍物呢? 如果是的话,请看这篇教程,我们会展示如何使用A星寻路算法来实现它! 在网上已经有很多篇关于A星寻路算法 ...
- JAVA写接口傻瓜(?)教程(一)
当一个安卓开发人员/微信小程序开发者想做点什么的时候,如果他发现没有合适的接口,那么单机安卓.本地数据库emmm.没了接口就好像老人没了拐杖.盲人没了墨镜,完全可以称得上是举步维艰.生活艰难到需要自己 ...
- 简易OA漫谈之工作流设计(四,怎么支持会签)
会签:就是一个步骤要所有人都审批完成才能完成. 上一步提交到会签步骤时,该步骤的每个人都能收到一条待办任务, 会签审批人每次提交时都检查该步骤所有会签人是否已经审批,如果全部审批就产生下一手任务. 演 ...
- Sed练习
sed:编辑器 sed:Stream EDitor,行编辑器 用法: sed [opthon]... ‘script’ inputfile.. scritp:‘地址命令’ 常用选项: ...
- 基于JDK1.8版本的hashmap源码笔记(二)
这一篇是接着上一篇写的, 上一篇的地址是:基于JDK1.8版本的hashmap源码分析(一) /** * 返回boolean类型的值,当集合中包含key的键值,就返回true,否则就返 ...
- C#设计模式(0)-设计模式系列文章导航
设计模式系列文章导航 C#设计模式(1)——单例模式(SingletonPattern) C#设计模式(2)——简单工厂模式(SimpleFactory) C#设计模式(3)——工厂方法模式( ...