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