webpack https://www.webpackjs.com/
学webpack就靠记忆、英文（报错都是英文的，挂就挂在一报错就懵圈） 报错了就多翻译，多报几次就会了 未来的Vue或者React都的用它
模块化开发：
不管下面3个有多大区别，核心点：就是他们如何做到的模块化方式。
简单点:如何导出，如何引入。
CommonJS node就遵循这套规范
module.exports 导出
require（） 引入
CommonJS规定，每一个JS都是单独的模块（模块是私有的：里面涉及的值、变量以及函数等都是私有的，和其它JS文件中的内容不冲突）
特点：
1. 所有代码都运行在模块作用域，不会污染全局作用域（每一个模块都是私有的，包括里面所有的东西都是私有的）
2. 模块可以多次加载，但是只会在第一次加载时运行一次，因为第一次加载的时候缓存了。如果想多次调用，必须清理缓存。（为了保证性能，减少模块代码重复执行的次数）
3. 模块加载顺序时按照其在代码中出现的顺序。CommonJS是同步操作
AMD require.js
Asynchronous Module Definition，即异步模块加载机制
CMD sea.js
CMD(Common Module Definition)表示通用模块定义
ES6模块化
import {fn} from './xx.js'; 引入模块
//xx.js
export function fn(){} 导出模块
// 写法一 export var m = 1
// 写法二 var m = 1; export {m}
// 写法三 var n = 1; export {n as m};
export function fn( ){ } 导出模块
/***************************下面正是进入 webpack*************** 2018-12-25***************/
webpack可以看做是模块打包机，它做的事情是分析你的项目结构。
找到js模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等）。
并将打包为适合的格式以供浏览器使用。
1.代码转换：ts编译成js，把scss编译为css
2.文件优化：压缩js，css，html代码，压缩合并图片等
3.代码分割：提取多个页面的公关代码，提取首屏不需要的执行部分的代码让其异步加载
4.模块合并：在采用模块化的项目了会有很多个模块和文件，需要构建功能把功能模块分类合并成一个文件
5.自动刷新：监听本地源代码的变化。自动重新构建刷新浏览器
快速上手：
1.初始化项目（取名字的时候一定不要取工具的名字） npm init -y
2.安装webpack：(npm i webpack webpack-cli -D)
在全局安装：
npm i webpack -g 不建议。
建议在本地安装：
npm install webpack -save-dev
npm i webpack-cli -D
简写：npm i webpack -D
开发依赖：有些配置开发的时候使用，到了线上就不使用了
项目依赖：打包后上线需要的依赖 npm i xx -S
3.手动创建 webpack.config.js 文件
4.入口、出口、模块、插件
在package.json文件里"scripts"对象里写入"build":"webpack"。
npm run build （build，是自己起的要创建的文件夹的名字
5. 安装 npm i html-webpack-plugin -D
英文储备：
参考代码--语法：
let path = require('path')
module.exports = {
mode:'development',//要配置mode：development （开发依赖） mode：production （生产依赖）
entry:'./c.js',//入口文件,去解析某个（些）指定的文件，最终编译成浏览器可以使用的文件
output:{ //出口
path:path.resolve(__dirname,'build'),//把出口文件放在当前目中一个叫build的文件夹里（path：路径，__dirname：目录名）
filename:'c.js',
},
}
let path = require('path')
/*
下载、引入html-webpack-plugin的插件
*/
const HWP = require('html-webpack-plugin');// npm i html-webpack-plugin -D
module.exports = {
mode:'development',//要配置mode：development （开发依赖） mode：production （生产依赖）
entry:{//['./c.js','e./js'],//入口文件,去解析某个（些）指定的文件，最终编译成浏览器可以使用的文件（entry：可以是字符串、数组、对象）
cc:'./c.js',
ee:'./e.js'
},
output:{ //出口
path:path.resolve(__dirname,'build'),//把出口文件放在当前目中一个叫build的文件夹里（path：路径，__dirname：目录名）
filename:'[name].[hash:5]js',//出口文件的文件名,[hash]给文件名添加一个编码。 :5让编码变成5位数。
},
plugins:[
new HWP({
filename:'index.html',//编译后的文件名,不写这句话默认是index.html
template:'./1_webpack前夕.html',//以哪个html为模板
chunks:['cc','ee']
})
]
}
const path = require('path');
const HWP = require('html-webpack-plugin');// npm i html-webpack-plugin -D
/*
entry:
字符串 './c.js'
数组 ['./c.js','./e.js']
对象 {cc:'./c.js',ee:'./e.js'}
*/
let obj = {
mode:'development', //方式
entry:['./c.js'], //入口
output:{ //输出
path:path.resolve(__dirname,'build'),
filename:'wmm.js'
},
plugins:[ //外挂
new HWP({
template:'./1_webpack前夕.html'
})
]
}
module.exports = obj; //module.exports 模块.出口
const path = require('path');
const HWP = require('html-webpack-plugin');
let obj = {
mode:'development',
entry:{
cc:'./c.js',
ee:'./e.js'
},
output:{
path:path.resolve(__dirname,'build'),
filename:'[name].js',
},
plugins:[
new HWP({
template:'./1_webpack前夕.html',
chunks:['cc'],
filename:'index.html',
}),
new HWP({
template:'./2_webpack.html',
filename:'index2.html',
chunks:['ee']
})
]
}
module.exports = obj;
const path = require('path');
const HWP = require('html-webpack-plugin'); // npm i html-webpack-plugin -D
let obj = {
mode:'development',
entry:{
cc:'./c.js',
ee:'./e.js'
},
output:{
path:path.resolve(__dirname,'build'),
filename:'[name].[hash:5].js'
},
plugins:[
new HWP({
template:'./1_webpack前夕.html',
chunks:['cc','ee'],
filename:'index.html',
minify: {
removeAttributeQuotes:true,//去掉属性的引号
collapseWhitespace:true //html压缩一行
},
})
]
}
module.exports = obj;