webpack简单入门
Webpack常用场景
一、引入
- 前端模块化开发
Es import 引入文件
CommonJs require 引入文件......
基于模块化开发，通过模块加载各种依赖文件后在浏览器执行会报错，因为浏览器不认识import 或者 require等语法，所以引出webpack,模块化打包工具，将浏览器不认识的文件打包生成一个浏览器可以识别的文件。比如你用了es6语法，但是有些浏览器不支持es6,就可以用webpack打包，将es6编译成es5，从而起到一个兼容的作用。。。。。。
让我们来实际操作一下。建一个$webpack文件夹，包含a.js/b.js/index.html/index.js四个文件
按以上操作后运行index.html 会在浏览器看到以下报错信息
这时候就需要webpack上场啦。
Webpack中文文档https://www.webpackjs.com/
Webpack 基于Node环境，所以本机一定要有node环境。
二、一个简单的webpack
1、如果你以前安装过全局的webpack想卸了重装的执行这条命令
npm uninstall -g webpack
这个过程巨慢，只少我是这样
然后安装执行这条命令
npm install webpack webpack-cli --save-dev
不建议全局安装，只安装在本地项目下即可，以免版本不一致对其他项目造成影响。
安装完成后在项目里会看到一个node module文件夹。
这时候就可以运行webpack 进行打包啦！
运行命令
webpack index.js
恭喜你报错了
运行命令
npx webpack index.js
这才成功了！！！
这时候你会问npx是啥？？？为什么webpack index.js不行
npx 是 webpack-cli下的一个自带的工具
因为我们在本地安装了webpack ,全局命令 webpack index.js 进行打包自然是不可以的，而npx会先在我们本地项目里去找，这样就不会报错了。
打包成功后再来看我们的项目目录
多了一个dist文件，dist目录下有个main.js ,这个就是所谓的入口文件啦。
把index.html里的js路径修改一下，你会发现浏览器运行成功了。
到这儿你就算是入门了。
2、当然我们亦可以手动修改打包后的文件名字呀，路径呀啥的
手动配置的话就需要webpack.congfig.js文件登场了
配置完成，重新打包（需要把原来的先删掉，不然名字不一样会累加）
记得修改index.html中引入的js文件名字，跟你生成的入口文件名称要一致。
三、loader
webpack 起初只是一个单纯的js打包工具，所以webpack 本身是不支持编译CSS(less\sass),图片和 其他的文件的，所以想要打包这些东西就需要引入第三方的模块，比如css-loader等。
1、打包静态文件
接下来我们试着引入一张图片。
打包~~~~~~
报错是不是在意料之中。。。。。。
在配置文件中添加对图片的处理配置
然后安装file-loader依赖
npm install --save-dev file-loader
安装成功后打包，运行，在浏览器里可以看到图片信息被打印出来了
在打包的目录下可以看到一个有哈希值的图片
File-loader用于处理静态资源的打包编译，可以解析jpg,png,svg等等
那么问题来了，如果不想要这么长的名字呢，可以这么办
配置完成后打包就会发现没有那么长的名字啦
那如果想要单独把图片放在一个文件夹下呢？这样来
在options中配置outputPath就OK，打包后就会看到一个images文件夹啦~~~~~
2、打包CSS
首先引入css文件，然后意料之中的报错
直接在配置文件中加入模块，并且记得安装一下
如果使用sass或者lass等时这样将所需依赖下载css-loader之后
对于CSS3的新属性，有些浏览器兼容会加一些前缀
可以使用postcss-loader进行处理
安装postcss-loader和autoprefixer
npm install postcss-loader autoprefixer -Dpostcss-loader autoprefixer
使用postcss-loader需要新建一个postcss.config.js
在postcss.config.js进行如下配置
autoprefixer会自动补全前缀
webpack.config.js中配置如下
在css中添加一些样式
打包！~~~~~~
就会在浏览器里看到
我们没有写-webkit,但是已经自动加载了。
简单的webpack打包就到这里啦，你懂了吗？