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

1、打包单个.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中导入的一定是打包之后的输出文件

2、打包多个具有依赖关系的.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 。

3、打包非.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" 使用双引号即可，不然会报错

4、配置文件(一起打包,重点学习)

作用：简化打包的操作

步骤：

　　 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

5、插件

作用：让我们Webpack的功能更加强大

全局包&本地包：

　　（1）安装方式不一样

　　全局包 npm i webpack -g 用在终端里面，执行命令

　　本地包 npm i webpack --save-dev 用在项目里面的

　　（2）安装的地方不一样

　　全局包：是安装在个人目录下 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同级。