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同级