模块化和webpack

常见的模块化规范
CommonJS、AMD、CMD、ES6的Modules等

如果不使用模块化，会导致全局变量同名等问题，ES5之前通过在js文件中，将所有js代码写入立即自执行函数中，最后把需要返回的变量封装进函数返回。

webpack

webpack从本质上讲，是一个现代的JavaScript应用的静态模块打包工具。其正常运行依赖于node环境

npm工具可以帮助我们管理node环境下的众多包
当需要用到node中的某些包，是要配置文件package.json、webpack.config.js，其中通过npm init初始化得到package.json文件，然后通过npm install package安装依赖的包

可以在package.json文件中，在scripts里编写脚本，将webpack指令与npm映射起来，而且优先在本地局部寻找

npm install webpack@3.6.0 --save-dev 到对应目录局部安装
npm install webpack@3.6.0 -g 全局安装

注意：终端里面敲命令用的都是全局的

webpack可以处理js代码，自动处理js之间的关系。那么如果也需要将less、scss转化成css，es6、typescript转化为es5，.jsx、.vue转化成js文件等，但是webpack对于这些转化是不支持的，所以需要给webpack扩展loader

全都打包到bundle.js中，main.js入口文件需要对其他文件有依赖。

loader的使用过程：1、npm安装对应的loader 2、在webpack.config.js中的modules关键字下配置

1、使用css配置
css-loader只负责帮你加载，不负责帮你解析。如果想添加至DOM元素，还需要style-loader
npm install css-loader --save-dev
npm install style-loader --save-dev

2、使用less配置
npm install less-loader less --save-dev
less版本3.9.0 less-loader5.0.0

3、图片配置
安装url-loader，适合1-2k的图片，当图片小于limit时，会将图片编译成base64字符串形式。
当图片大于limit时，需要使用file-loader，默认limit为8196，8kb。然后将图片名字打包到dist文件夹下，并以32位hash值命名，防止名字重复，为了正常渲染，需要设置publicPath

4、es6语法处理
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

5、配置vue

--save  表示运行时依赖
--save-dev表示开发时依赖

runtime-only 代码中，不可以有任何的template
runtime-compiler 代码中可以有template，因为有compiler可以用于编译template。默认runtime-only，若想使用compiler需要配置resolve属性

若要使用还需要import Vue from ‘vue’

6、plugin
plugin和loader区别：
loader主要用于转换某些类型的模块，是一个转换器
plugin是插件，是对webpack本身的扩展，是一个扩展器

（1）webpack自带插件添加版权 BannerPlugin
（2）HtmlWebpackPlugin插件 自动生成index.html文件，将打包的js文件自动通过script标签插入body中。报错可能版本过高
（3）项目发布前需要对js进行压缩，需要用到插件uglifyjs-webpack-plugin，并且版本号指定1.1.1，和CLI2保持一致
（4）webpack提供了一个可选本地服务器，基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。
安装：npm install webpack-dev-server@2.9.3 --save-dev

注意：插件是多个new逗号隔开

（5）配置文件分离