WebPack

互联网经过这么多年的发展，页面由一开始的红黄蓝绿到现在的多元化，页面变得越来越复杂，自然而然的产生了诸多问题，比如说前端代码的模块化和工程化，应运而生的React,Vue库使得大型的网页开发不在局限于jquery的DOM操作，让前端开发有了更多的体验

一，什么是WebPack

首先要了解什么是模块化：模块化是指解决一个复杂问题时，自顶向下逐层把系统划分成若干模块的过程，有多种属性，分别反映其内部特性。前端的模块化一般都是Nodejs里面的NPM包。本质上webpack是一个现代的js应用程序的静态打包器。

不使用：浏览器解析浪费时间过多，不安全源代码能被别人看到，服务器请求压力大

使用：方便我们把完成的代码里面的注释，空格，换行进行压缩，减少传输时间，最后关键的是可以给我们的代码进行加密。

二，安装WebPack

以webstorm为例需要先安装 WebPack.

npm install webpack -d
npm install webpack-cli -d
-d:表示该模块在生产环境下不使用，只在开发环境下使用

开发环境:当项目处于开发阶段, 项目运行在开发人员的电脑上, 项目所处的环境就是开发环境

生产环境:当项目开发完成以后, 要将项目放到真实的网站服务器电脑中运行, 项目所处的环境就是生产环境。

三，使用打包工具

1压缩js文件 dsg.js s.js hgh.js

首先创建入口文件 main.js

//引入js文件
import'./dsg';
import'./s';
import'./hgh'

然后配置文件，在里面需要配置入口文件地址，输出文件地址和输出文件名字（放在根目录下）【webpack.config.js】

let path = require("path");
// 配置内容
module.exports = {
    // 入口文件
    entry:"./src/main.js",
    // 输出文件【名称、地址】
    output:{
        // 地址
        path:path.join(__dirname,"src"),
        // 名称
        filename:"demo.min.js"
    }
}

运行只需要在控制台输入 webpack

2打包css文件 a.css b.css

需要先下载第三方模块loader来打包css文件

let path = require("path");
// 配置内容
module.exports = 

css的入口文件

import './c.css'
import './d.css'

配置文件

let path = require("path");
module.exports = {
    entry:{
        css:"./src/mainCss.js"
    },
    output:{
        path:path.join(__dirname,"src"),
        filename:"[name].min.js"
    },
    module:{
        rules:[
            {
                test:/.css$/,
                use:["style-loader","css-loader"]
            }
        ]
    }
}

3 js文件和css文件一起打包

入口文件

// 引入js文件
import './dsg';
import './s';
import './hgh';

// 引入css文件
import './a.css'
import './b.css'

配置文件

let path = require("path");
module.exports = {
    entry:"./src/mainCss.js",
    output:{
        path:path.join(__dirname,"src"),
        filename:"css.min.js"
    },
    module:{
        rules:[
            {
                test:/.css$/,
                use:["style-loader","css-loader"]
            }
        ]
    }
}