webpack入门及踩坑应对指南

webpack的使用

为何使用webpack

1.前端须要工程化

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

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

2.文件复杂多样

1. css/js/html/img/svg 文件多
2. 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，绝大多数状况下是有效的，当报错信息变化了说明这个解决方法是有效的，