webpack入门及踩坑应对指南

ky0ncheng 发布于2019-08-22 16:20 / 3133人阅读

摘要：的使用为什么使用前端需要工程化工程化的概念小作坊流水线流水线的特点自动化，模块化性能优化自动化就是命令行操作，一行命令实现多个功能，例如自动监听变化，自动翻译源代码到打包代码库里面文件复杂多样文件多变化快将各种文件集

webpack的使用

为什么使用webpack

1.前端需要工程化

工程化的概念： 小作坊 -> 流水线
流水线的特点：自动化，模块化、性能优化

自动化就是命令行操作，一行命令实现多个功能，例如自动监听变化，自动翻译源代码到打包代码库里面

2.文件复杂多样

css/js/html/img/svg 文件多

css-less-sass-scss-stylus
js - coffee - es6 - typescript - babel
html - jade - pug - slim 变化快

将各种文件集合到一起，看成一个模块，通过模块来打包，这就是webpack的优势之处。

css loader一直报错

webpack的配置堪称玄学，报错了无法找到原因，推荐你这样做，且建议不参考别人的配置，最好参考官方的配置例子，这样碰到错误还可以在github的issue上进行提问和寻找解决方法

你需要首先删除掉node_modules所有的内容

然后重新安装依赖npm install

都不行的话，你需要寻找readme的不同之处，例如css-loader中，不同版本加载的loader也不相同

关于webpack中loader的学习，可以参加阮一峰的文章和学习demo

css loader
github

奇技淫巧

1.全局安装VS局部安装

全局安装：npm install -g http-server，安装目录为user/local/.bin/，安装在全局目录下

局部安装：安装在局部目录下，./node_modules/.bin,需要通过文件前缀才可以访问得到

例如你想用webpack来打包代码

全局： webpack main.js bundle.js
局部： ./node_modules/.bin/webpack main.js bundle.js

此外，有个简写命令可以执行webpack命令，执行局部目录的webpack可以改成这样npx webpack

2.webpack中的关键目录

./ 当前目录
src source 未经翻译原始代码的文件夹
dist distribution 发布代码文件夹
node_modules/vendors 第三方代码文件夹

3.自动添加前缀的loader autoprefixer

4.报错提示找不到某个模块，cannt find "module"，就安装这个模块npm install module，绝大多数情况下是有效的，当报错信息变化了说明这个解决方法是有效的，

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94251.html

vue-cli3.x 新特性及踩坑记

摘要：前言都到了，所以是时候玩转一下的新特性了。安装的包名称由改成了。方法一原因的配置改变了，导致正确的不能用。打开终端，切换到根路径文件里面修改为方法二是默认路径修改了路径会出现错误。按上面的方法修改完，再全局卸载果然就成功了。 showImg(https://segmentfault.com/img/remote/1460000016423946); 前言 vue-cli 都到 3.0....

xiaoqibTn 2019-08-23 12:01 评论0 收藏0
全局拖拽上传文件（类似百度网盘）的实现及踩坑

摘要：记录下，开发需求是实现一个类似百度网盘全局拖拽的功能兼容浏览器，以上。监听上的事件，显示拖拽的蒙层监听目标节点上的拖拽事件。记录下，开发需求是实现一个类似百度网盘全局拖拽的功能,兼容浏览器，IE0以上。实现思路是，采用原声的拖拽事件。监听window上的dragenter事件，拖拽目标节点是fixed罩住页面的dropZone节点。监听window上的dragenter事件，显示...

shiguibiao 2019-08-26 11:41 评论0 收藏0
Vue + TypeScript + Element 项目实践(简洁时尚博客网站)及踩坑记

摘要：前言本文讲解如何在项目中使用来搭建并开发项目，并在此过程中踩过的坑。具有类型系统，且是的超集，在年势头迅猛，可谓遍地开花。年将会更加普及，能够熟练掌握，并使用开发过项目，将更加成为前端开发者的优势。 showImg(https://segmentfault.com/img/remote/1460000018720573); 前言本文讲解如何在 Vue 项目中使用 TypeScript...

luckyyulin 2019-08-26 13:39 评论0 收藏0
vue 开发中遇到的问题汇总（踩坑指南）

摘要：组件中使用定时器及销毁问题如果我们在页面中使用了一个定时器，当从页面跳转到页面时，如果不手动清除这个定时器，那么它仍旧会执行，这不是我们所期望的。公司年初开始从jquery转型到vue开发，思想上从jquery的操作DOM到vue的操作数据，刚开始还不太习惯，但用了一段时间发现确实比较方便。在刚开始用vue的时候，也踩了一些坑，现在分享出来，供刚入门上手开发vue的朋友参考，都是一些...

wean 2019-08-20 18:52 评论0 收藏0
webpack v2升级踩坑笔记

摘要：从再到目前当红明星，前端模块打包技术日新月异，在今年月份和月份左右接连更新了和版本为了减少冗余模块，缩减文件大小，中也加入了关于的特征，可以查看知乎如何评价新引入的代码优化技术的讨论。从Grunt->gulp->webpack,再到目前当红明星rollup，前端模块打包技术日新月异，webpack在今年1月份和6月份左右接连更新了v2和v3版本,为了减少冗余模块，缩减bundle文件...

JayChen 2019-08-20 17:59 评论0 收藏0