webpack（一）压缩js,加载css,压缩html,压缩图片

1.webpack是前端资源构建工具(将一系列小工具用一个大工具处理)，静态模块打包器(js资源，css资源，图片字体等资源)。  
首先告诉webpack一个入口文件，webpack就会以这个入口文件为起点开始打包，根据模块（资源文件）的依赖关系进行静态分析，形成依赖关系树状图，然后形成chunk.js(代码块)，然后chunk再进行各种处理，比如将less转换成css,将ES6转换成ES5,这些操作统一概括起来叫做打包，打包后将处理好的资源输出去叫bundles（静态资源）。

功能
- 将浏览器不可解析的less,sass css预处理器"编译"成浏览器可识别的css
- 将ES6高级的js编译成浏览器可识别的js

五个概念
1. entry:入口文件，指示webpack用哪个文件作为入口，分析内部关系依赖图。
2. output:指示webpack打包后的资源bundles输出到哪里去，以及如何命名。
3. loader：让webpack处理那些非javascript文件（webpack自身只能理解js)
4. plugins: 执行范围更广的任务，插件的范围包括打包优化，压缩，重新定义环境中的变量。
5. mode: 指示webpack使用相应模式的配置，设置process.env.NODE_ENV。
- 开发模式（development),能让代码本地调试运行的环境
- 生产模式（production)，能让代码优化上线运行的环境

练习1，压缩js

初始化项目，在项目终端输入npm init 生成package.json文件

npm init

下载webpack,项目终端运行以下命令

npm i webpack webpack-cli -g
npm i webpack webpack-cli -D

在项目目录新建src文件夹，build文件夹，然后再src文件夹新建一个index.js文件，在index.js中随意输入一些js代码，然后执行如下命令，这个命令的意思是

webpack 以index.js 入口文件打包,打包后输出到build，整体打包环境是开发环境，如果打包环境是生成环境，把mode=developement 改为 mode=production

webpack ./src/index.js -o ./build/built.js  --mode=development

打包成功后会在我们刚指定的bulid文件夹下面看到打包后的代码，同时在命令行看到打包前的文件比打包后的文件大，说明webpack有压缩j代码。减小文件体积的功能。

练习2， 加载css

webpack 只能识别js 和 json文件，如果要识别css 文件，就要写配置，新建webpack.confing.js. 如下

// 所有构建工具是基于nodejs平台运行的，模块默认使用commmon.js
const {resolve} = require('path')
module.exports={
    //入口文件，指示webpack以哪个文件开始打包
    entry:"./src/index.js",
    output:{
        //输出的文件名
        filename:"built.js",
        //输出路径
        //__dirname :nodejs 变量，代表当前文件目录的绝对路径
        path:resolve(__dirname,"build")
    },
    //loader的配资
    module:{
        //不同文件必须配置不同loader处理
        rules:[
            {
                //匹配哪些文件,正则匹配css文件
                test:/\.css$/,
                //使用哪些loader
                use:[
                      //uses数组执行顺序，从下到上依次执行
                      //创建style标签，将js中的样式资源插入进行，添加到head中生效
                        'style-loader',
                      //将css文件变成commmon.js模块加载到js中，里面内容是样式字符串
                        'css-loader'

                ]
            },
            {
                test:"/\.less$/",
                user:[
                    "style-loader",
                    "css-loader",
                    //将less文件编译成css文件
                    "less-loader"
                ]
            }


        ]
            //详细loader配置
    },
    //plugins的配置
    plugins:[

    ],
    //模式
    mode:"development",
    // mode:"production"
}

测试代码

import "./index.css";
function add(x,y){
    return x+y
}
console.log(add(1,2))

下载css-loader 和style-loader， 这两个都是开发依赖

npm i css-loader style-loader -D

然后在命令行输入"webpack"开始打包，打包成功后如图，可以看到css文件也被打包进去了。

 

如果要测试刚刚写的js 和 css 代码有没有生效，可在打包后的文件夹build下建一个index.html，然后引入打包过后的文件，再运行，可以看到写的css样式生效

练习3， 压缩html

使用插件压缩html，在src文件夹下新建index.html,任意输入HTML内容,webpack.config.js内容如下

// 所有构建工具是基于nodejs平台运行的，模块默认使用commmon.js
const {resolve} = require('path');
const HtmlWebpack =  require('html-webpack-plugin')
module.exports={
    //入口文件，指示webpack以哪个文件开始打包
    entry:"./src/index.js",
    output:{
        //输出的文件名
        filename:"built.js",
        //输出路径
        //__dirname :nodejs 变量，代表当前文件目录的绝对路径
        path:resolve(__dirname,"build")
    },
    //loader的配资
    module:{
        //不同文件必须配置不同loader处理
        rules:[
            {
                //匹配哪些文件,正则匹配css文件
                test:/\.css$/,
                //使用哪些loader
                use:[
                      //uses数组执行顺序，从下到上依次执行
                      //创建style标签，将js中的样式资源插入进行，添加到head中生效
                        'style-loader',
                      //将css文件变成commmon.js模块加载到js中，里面内容是样式字符串
                        'css-loader'

                ]
            }
        ]
    },
    //plugins的配置
    plugins:[
       new HtmlWebpack()
    ],
    //模式
    mode:"development",
    // mode:"production"
}

需要用html-webpack-plugin压缩HTML, 先下载html-webpack-plugin,然后执行webpack命令，就会在build文件夹下面自动生成一个index.html,

修改plugin后重新打包，这样打包完会将src下面的index.html复制出来

//plugins的配置
    plugins:[
        //功能：默认会创建一个空的html文件，引入打包输出的所有资源
        //需求：需要一个有结构的html.
       new HtmlWebpack({
           //复制如下文件，并将它原本的功能并引入打包输出的所有资源
           template:"./src/index.html"
           }
       )
    ],

练习4 压缩图片

（1）在src下面建一个index.css ,index.js  ,index.css写一个背景图样式，在index.js中映入index.css做测试

webpack.config.js   loader配置代码如下

//loader的配置
    module: {
        //不同文件必须配置不同loader处理
        rules: [
            {
                //匹配哪些文件,正则匹配css文件
                test: /\.css$/,
                //使用哪些loader
                use: [
                    //uses数组执行顺序，从下到上依次执行
                    //创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'style-loader',
                    //将css文件变成commmon.js模块加载到js中，里面内容是样式字符串
                    'css-loader'

                ]
            },
            {
               //处理图资源
                test: /\.(png|jpg|gif)$/,
                //需要下载url-loader 和file-loader ,url-loader 依赖 file-loader
                loader: 'url-loader',
                options:{
                    //图片小于8kb,图片会转为base64
                    //优点：减少请求数量，减轻服务器压力
                    //缺点：转换后的图片体积会更大一些
                    limit:8*1024,
                }
            }
        ]
    },

下载url-loader 和 file-loader后执行webpack，打包完成后会在build文件夹下看到一个带有哈希值的图片，index.css中的arrow.png图片没有生成哈希值的图片，因为刚在webpack配置文件设置小于8k的图片是转为了base64。

（2）src 文件夹下面建一个html文件，html文件中插入img标签并写好图片路径，这个时候用刚那个url-loader是处理不了的，打包后看不到这个图片，需做如下配置

   //loader的配资
    module: {
        //不同文件必须配置不同loader处理
        rules: [
            {
                //匹配哪些文件,正则匹配css文件
                test: /\.css$/,
                //使用哪些loader
                use: [
                    //uses数组执行顺序，从下到上依次执行
                    //创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'style-loader',
                    //将css文件变成commmon.js模块加载到js中，里面内容是样式字符串
                    'css-loader'

                ]
            },
            {
                //默认处理不了html中的图片
               //处理图资源
                test: /\.(png|jpg|gif)$/,
                //需要下载url-loader 和file-loader ,url-loader 依赖 file-loader
                //url-loader:处理样式中的图片路径
                loader: 'url-loader',
                options:{
                    //图片小于8kb,图片会转为base64
                    //优点：减少请求数量，减轻服务器压力
                    //缺点：转换后的图片体积会更大一些
                    limit:8*1024,
                },
                //给图片进行重命名
                //[hash:10] 取图片的hash的前10位
                //[ext]取文件原来的扩展名
                name:'[hash:10].[ext]'
            },
            {
                test:/\html$/,
                //处理html文件中的图片文件（负责引入img,从而能被url-loader进行处理）
                loader:"html-loader"
            }
        ]
    },

下载html-loader后再执行webpack.即可

 

5.打包其他资源（字体，图标）

webpack.config,js配置

 //loader的配资
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'

                ]
            },
            //打包其他资源（除了html/css/js)的资源

            {
                exclude: /\.(html|css|js)$/,
                loader: "file-loader",
                options: {
                    name: '[hash:10].[ext]'
                }
            },
]
}