Webpack基本用法（2019-03-22）

---

Webpack基本用法总结（个人见解）

一、什么是Webpack

1.Webpack是进行模块化开发的工具，可以把复杂的程序细化为小的文件，大大提高开发效率。
2.Scss、Less等css语言预处理。
3.压缩代码，使项目变轻。
4.有按需加载代码等工具。
5.热加载，增加调试效率。

二、安装和使用

npm install -g webpack
npm install --save-dev webpack

npm init
npm i //  安装依赖

三、配置Webpack

Webpack的配置文件是Webpack.config. js
如果配置不同环境下的webpack就要新建不同的配置文件
如dev环境下就是Webpack.dev.config.js、test环境下就是Webpack.test.config.js
然后把文件暴露出来，在package.json文件中的scripts下配置启动时要走的配置文件（具体还没有操作过- - ）

内配置容

基本配置
项目入口: entry:{}
项目出口: output:{}
加载器： loaders:｛｝css-loader style-loader file-loader scss/less-loader 等各种loader按需要配置
插件： plugins：[] 插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。如按需加在压缩代码等。
构建本地服务器：devServer：｛｝port配置本地服务器端口（默认8080）inline代码改动自动刷新页面
配置Bable转码 Es6、Es7转成Es5
具体配置见官网~~~或者这里https://segmentfault.com/a/1190000006178770