走近webpack（0）--正文之前的故事

【走近webpack（0）--正文之前的故事】的更多相关文章

走近webpack（0）--正文之前的故事

在前端工作的过程中,只要你接触过vue,angular,react,gulp就一定知道webpack或者听说过或者使用过webpack,但是或许你对webpack的使用方法并不是十分了解,只是会用写好的构建项目如:vue-cli,angular-cli等,那么这一系列的文章就是带你一点点走近webpack,真正弄懂webpack到底可以做什么,怎么做. 在真正的正文开始之前,我们先做一个小demo,就像所有的故事背景那样,这篇文章也作为该系列的故事背景.废话不多说,咱们开始吧. 一.安装(环境)…

走近webpack（1）--多入口及devServer的使用

上一篇文章留下了一些问题,如果你没看过上一篇文章,可以在我的博客里查找,或者直接从这篇文章开始也是没问题的. const path = require('path'); module.exports={ entry:{ entry:'./src/entry.js' }, output:{ path:path.resolve(__dirname,'dist'), /*上面的代码中还有path以及__dirname的意思就是指获取到当前项目的绝对路径,涉及到了node.js的相关知识,这里不做过多的…

走近webpack（2）--css打包及压缩js

前面的文章介绍了webpack的devServer以及多入口多出口文件的配置,咱们继续往下学. 在开始学习接下来的知识之前,我们先回顾一下,前文提到了webpack的简单配置方法,但是只详细说了下入口和出口文件的配置,并没有更多的去解释其他选项的配置,比如loader,plugin等.那么咱们现在就来学一下module的配置.前面说过,module的主要作用就是通过loaders来配置,解析,转换不同类型的模块.比如说,可以把less,sass转换成css,可以把es6甚至es7语法转换成大部分…

走近webpack（4）--css相关拓展

我们前面已经学了很多webpack基本的处理情况,一句话总结就是,一个优秀的webpack项目,主要的核心用法就是整合loader和plugin去处理你想要的任何需求. 下面,咱们一起来学学如何用webpack来处理less,sass等预编译器.先看看如何用webpack处理less. 国际惯例,第一步是安装: npm install less less-loader --save-dev 第二步,配置loader项: { test: /\.less$/, use: [{ loader: "st…