Webpack(打包工具)

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许
多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还
可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加
载。通过 loader 的转换，任何形式的资源都可以视作模块，比如
CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、
Coffeescript、 LESS 等。

###核心概念
入口:
webpack打包的入口文件

输出:
这个就是对源代码打包之后，得到的文件，文件我们一般命名为bundle.js

Loader:
默认情况下，webpack只能打包.js结尾的文件，但是webpack提供了很多Loader，能打包项目中任何文件,比如css，vue，png文件都可以打包

配置文件:
简化我们的配置，让我们少写代码

插件:
比如压缩js,比如开发阶段实现的热重载(在代码中保存，浏览器就自动刷新),
为了让webpack更加强大

###实际演练

前提:
	安装好`webpack`全局包 
	输入指令：npm i webpack -g

###打包单个.js文件

步骤：
		1、在cmd切换到项目根目录
		2、使用webpack全局包打包即可
			格式：webpack 入口文件(entry.js) 输出文件(bundle.js)
			输入指令： webpack entry.js bundle.js
		3、打包得到bundle.js，建立index.html，在index.html中导入打包之后的bundle.js
		4、运行
		
	注意点:
		在index.html中导入的一定是打包之后的输出文件

###打包多个具有依赖关系的.js文件

前提:
		在entry.js中的代码中导入依赖的文件
		
		1.在modul的内容 var name=“张三” 并且进行输出module.exports=name;
		2.在入口文件进行导入modul的内容
			const name = require('./module.js');
		3.然后进行打包得到bundle.js

	步骤：
		同上
		
	注意点:
		在index.html中导入的一定是打包之后的输出文件 bundle.js
		Webpack 会分析入口文件，解析包含依赖关系的各个文件。
		这些文件（模块）都打包到 bundle.js 。

###打包非.js文件 （通过Loaders实现）

以打包.css文件为例（需要额外做的步骤）	
	1、安装style-loader&css-loader
		先输入npm init -y 生成一个package.json用来装包的
		输入指令：cnpm i style-loader css-loader --save-dev
	2、在入口文件中导入css的时候，按照下面这样写
		在js中写：require('!style-loader!css-loader!./site.css')
		
	3、针对第二步，如果导入的css过多，还可以做一个简化，在入口文件，导入的时候，可以不用写前面的
		在js中写：require('./site.css')
		但是，在使用webpack打包的时候，得这样写
		输入指令：webpack entry.js bundle.js --module-bind "css=style-loader!css-loader"
		
	注意点:
		"css=style-loader!css-loader" 使用双引号即可，不然会报错

###配置文件(一起打包,重点学习)
作用:简化打包的操作

步骤:
	1、在项目根目录下创建一个文件名称叫 webpack.config.js的文件（默认文件名称）
	2、把我们原先在cmd中写的命令，全部写到webpack.config.js中(在这个文件中进行手动配置)
	3、最后在根目录下，执行webpack即可打包了
	
	a.在入口文件entry.js中导入想要的文件require('./site.css')
	b.不是js后缀的文件话在先装对应的loader文件,装之前要生成一个package.json用来装包
    c.在webpack.config.js输写下面的代码
        module.exports = {
        entry:'./entry.js', //项目打包的入口文件
        output:{			
            path: __dirname,
            filename: 'bundle.js' 	//输出文件
        },
        module:{ 					//配置loader
            loaders: [
                {
                    test: /\.css$/, 
                    loader: 'style-loader!css-loader' //loader执行顺序是从后往前
                }
            ]
        }
    }
    e.输入指令:webpack 即可打包 相当于webpack webpack.config.js

###插件
作用:让我们Webpack的功能更加强大

全局包&本地包
	安装方式不一样 
		全局包 npm i webpack -g   用在终端里面，执行命令
		本地包 npm i webpack --save-dev   用在项目里面的
		
	安装的地方不一样:
		全局包:是安装在个人目录下	C:\Users\你自己的用户名\AppData\Roaming\npm
		
		本地包:项目的根目录的node_modules中

1.步骤同上,用之前要在项目中安装本地webpack ,输入指令npm i webpack --save-dev
	2.代码如下:
    var webpack = require('webpack')

    module.exports = {
        entry:'./entry.js', //项目打包的入口文件
        output:{//输出文件
            path: __dirname,
            filename: 'bundle.js'
        },
        module:{ //配置loader
            loaders: [
                {
                    test: /\.css$/, 
                    loader: 'style-loader!css-loader' //loader执行顺序是从后往前
                }
            ]
        },
        plugins:[//插件
            new webpack.BannerPlugin('...这个文件是被我打包的...')
        ]
    }
	注意点:
		有些包既要全局安装，又要在项目中安装，不要觉得奇怪，应用的地方不一样
		plugins在我们的webpack.config.js中写的时候，必须和entry,output,module同级