自动化构建工具3-webpack

webpack。

webpack是一个模块打包器，在webpack看来，前端的静态资源都会作为模块处理，根据模块依赖关系进行静态资源分析，生成对应的静态资源。

webpack本身只能加载js/json，如果想加载其他类型的模块，需要使用对应的loader，进行加载。

loader是一个函数，接受源文件作为参数，返回转换结果。

我们先用webpack来打包一个js文件吧。

首先下载webpack 3***版本

npm install webpack@3 -g

npm install webpack@3 --save-dev

然后我们在本目录中创建 src/js/entry.js

document.write("entry.js is work");

然后在控制台输入 webpack src/js/entry.js build/js/build.js 

这样，在bulid/js中就有一个名为bulid.js的文件了，再在build中创建index.html，引入bulid.js，就可以看到效果了。

--------------------------------------------------------------------------------------------

最简单的打包文件的方法，我们知道了，接下来，我们在源文件中的js使用es6的模块化方法，引入几个文件，再来看看如何去打包。

在创建文件在src/js/，文件名为content.js。内容为

function foo() {
    document.write("我是在一个单独的模块中的")
}

export default {
    foo
}

创建文件在src/data/,文件名为data.json。内容为

{
  "name":"xiaoming",
  "age":18
}

主模块src/js/entry.js内容为

//es6模块化语法引入content.js与data.json
import content from "./content.js";
import data from  "../data/data.json"

//调用方法与输出引入的json对象
content.foo();
document.write("entry.js is work");
console.log(data);

这是，如果我们打包的话，只用打包主文件，src/js/entry.js即可。

控制台输入 webpack src/js/entry.js build/js/build.js

只需要打包主模块，在最终的输入模块中，内容就全都有了。

---------------------------------------------------------------------------------------

如果我们想打包一个文件，总是要在命令行窗口写好多的代码，webpack也有像Grunt与Gulp一样的配置文件，有了配置文件，只要在控制台输入webpack，就会自动读取配置文件，来进行相应的任务。

在根目录创建js文件 webpack.config.js 文件内容

//引入node的路径包
const path = require('path');

//暴露对象
module.exports = {
    //要打包文件的地址
    entry: './src/js/entry.js',
    //输出文件的配置
    output: {
        //输出的地址，__dirname是本文件所在的目录 ,第二个参数是要输出的目录
        //二者组合起来，成为绝对地址
        path: path.resolve(__dirname, 'build/js'),
        //输出文件的文件名
        filename: 'bundle.js'
    }
};

如果有了配置文件，则只需在命令行输入webpack就好了。

---------------------------------------------------------------------------

打包css与图片

先从加载css开始，因为webpack默认只能加载js与json，所以，想要加载css需要下载相应的loader。

npm install css-loader style-loader --save-dev

下载好之后，让我们创建一个css文件，并且在主模块中引入，配置webpack.config.js对于css的处理，最后编译主模块，让html文件引入编译好的文件即可。

创建css文件 src/css/index.css

body{
    background-color: yellow;
}

在主模块中引入 src/js/entry.js

import "../css/index.css"

在webpack.config.css中配置，如何配置可以去官网的相应loader中寻找。

module: {
        //对于所有loader的配置，都要放在这里面
        rules: [
            {
                //test表示对于什么样的文件起作用，/\.css$/表示对css文件起作用
                test: /\.css$/,
                //表示对该文件使用什么样的模块。
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }

两个loader，css-loader是用于加载css模块，进行css的编译，style-loader是为了将编译好的css应用于网页。

最后，在命令行输入 webpack 对文件进行编译，html文件对编译后的文件引用即可。

--------------------------------------------------------------------

接下来说图片的加载

还是先下载loader， npm install file-loader url-loader --save-dev

然后进行loader的配置，css引入两个图片，一个大于8kb，一个小于8kb，然后加载css与图片

先添加两个图片 src/imgs/

先使用css文件引用两个图片 src/css/index.css

.box1{
    width: 200px;
    height: 200px;
    background: url("../imgs/big.jpg");

}

.box2{
    width: 200px;
    height: 200px;
    background: url("../imgs/logo.jpg");
}

之后对webpack.config.js进行配置

{
                //对于一下图片进行处理
                test: /\.(png|jpg|gif)$/,
                //对于这些图片使用url-loader模块，并且图片小于8kb就进行base64的转换。
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192
                        }
                    }
                ]
            }

最后进行加载。会看到少一个图片

如果我们看控制台的错误情况，就会看到，文件未找到，如果html找不到引用的文件，就会去本身一级目录寻找，所以，我们只要把index.html与js文件放到一个目录即可。

还有一个方法，就是在webpack.config.jsz中进行配置，告诉html文件找不到资源去相对于自身html去哪里找。

output: {
        //输出的地址，__dirname是本文件所在的目录 ,第二个参数是要输出的目录
        //二者组合起来，成为绝对地址
        path: path.resolve(__dirname, 'build/js'),
        //输出文件的文件名
        filename: 'build.js',
        publicPath:"js/"

    },

-----------------------------------------------------------------------------------------

一些基本的加载配置我们已经说完了，接下来，就来说说最后的热加载吧。

下载

npm install webpack-dev-server@2 -g 

npm install webpack-dev-server@2 --save-dev

需要全局安装一遍，局部安装一遍

然后在webpack.config.js中进行配置

//webpack-dev-server内置一个服务器，所有编译的文件会在它的内存里，并且是服务于
    //根目录的index.html文件的，而我们的index.html文件在build/js/中，我们就要进行
    //相应的配置，使用contentBase进行index.html文件的寻找
    devServer: {
        contentBase: 'build/js/'
    },

然后在命令行输入 webpack-dev-server --open  就可以实现热加载了。

注：--open 是为了可以自动打开该页面。 

---------------------------------------------------------------------------------

最后来说说webpack的插件，今天先说两个插件，一个是 HtmlWebpackPlugin ，一个是cleanWebpackPlugin。

想使用插件，还是先下载，再引入

下载：npm install --save-dev html-webpack-plugin clean-webpack-plugin

引入：

const htmlWebpackplugin = require("html-webpack-plugin");
const cleanWebpackplugin = require("clean-webpack-plugin");

再进行配置

//配置插件
    plugins: [
        //该插件将为你生成一个 HTML5 文件， 其中包括使用 script 标签的 body 中的所有 webpack 包。
        new htmlWebpackplugin({template:"./index.html"}),
        //用于清除一个文件夹
        new cleanWebpackplugin(["build"])
    ]

运行之后，就会基于index.html自动在之前配置好的目录，把所有需要的文件创建出来，cleanWebpackPlugin会删除数组中的文件夹。