为什么要使用Webpack

• 转换ES6语法
• 转换JSX
• CSS前缀补全/预处理器
• 压缩整合
• 图片压缩
• Vue/React/Anguler的解析

前端构建演变

-> ant + YUI Tool -> Grunt -> Fis3
-> Gulp -> Rollup
-> Webpack
​ -> Parcel

为什么选择Webpack

• 社区生态丰富
• 配置灵活和插件化扩展
• 官方更新迭代速度快

初识Webpack

• 默认的配置文件：webpack.config.js

  ​ 可以通过webpack –config <指定文件>

• 配置文件组成

module.exports = {
    entry:'./src/index.js', //入口文件
    output:'./dist/main.js', //打包输出
    mode:'production', //环境
    module:{
        rules:[ //Loader配置
            {test:/\.txt$/,use:'raw-loader'}
        ]
    },
    plugins:[ //插件配置
        new HtmlwebpackPlugin({
            template:'./src/index.html'
        })
    ]
  }
  

核心概念

Entry

​ 作为入口配置，简单来说就从哪个文件开始打包。

用法：

• 单入口

  module.exports={
    entry:'./path/file.js'
  }

• 多入口

  module.exports={
    entry:{
        app:'./src/app.js',
        adminApp:'./src/adminApp.js'
    }
  }

Output

​ 将打包后的文件输出到哪里。

用法：

• 单出口

  module.exports={
    entry:'./path/file.js',
    output:{
          filename:'bundle.js',
          path:__dirname+'/dist'
    }
  }

• 多出口

  module.exports={
    entry:{
        app:'./src/app.js',
        adminApp:'./src/adminApp.js'
    },
      output:{
        filename:'[name].js',
          path:__dirname+'/dist'
    }
  }

Loaders

​ webpack开箱即用只支持js和json这两种文件类型。像VUE，JSX这些webpack是不支持的，所以就有了Loader。简单来说Loaders就是处理文件的。

​ Loader本身就是一个函数，接收源文件作为参数然后在返回结果。

常见Loader

用法

module.exports = {
    entry:'./src/index.js', //入口文件
    output:'./dist/main.js', //打包输出
    mode:'production', //环境
    module:{
        rules:[ //Loaders配置
            {test:/\.txt$/,use:'raw-loader'}
        ]
    }
}

Plugins

​ 增强Webpack的功能，将打包后的文件进行优化、资源管理、环境变量的注入等待。简单来说就是Loaders做不了的用Plugins来做。

​ 作用用整个构建过程。

常用的插件

说明：安装插件时要将所有的大写改为小写并且在非第一个大写字母前加短横线-。

用法

module.exports = {
    entry:'./src/index.js', //入口文件
    output:'./dist/main.js', //打包输出
    mode:'production', //环境
    module:{
        rules:[ //Loader配置
            {test:/\.txt$/,use:'raw-loader'}
        ]
    },
    plugins:[ //插件配置
        new HtmlwebpackPlugin({
            template:'./src/index.html'
        })
    ]
}

Mode

​ mode是在webpack4提出的一个概念，通过mode来指定当前的构建环境，比如：你现在是development（开发）环境，或者是production（生成环境默认）.

例子

解析ES6

# 安装依赖
npm i -g webpack webpack-cli
npm i -D @babel/core @babel/preset-env babel-loader
# @babel/core       babel核心文件（必须安装）
# @babel/preset-env babel用来转换ES5
# babel-loader      webpack的loader,调用babel的

//webpack.config.js
module.exports={
    entry:"./src/app.js",
    output:{
        filename:bundle.js,
        path:__dirname+'/dist'
    },
    mode:'development',
    module:{
        rules:[
            {
                test:/.js$/,
                use:'babel-loader'
            }
        ]
    }
}

//.babelrc
{
    "presets":[
        "@babel/preset-env"
    ]
}

解析CSS

# 安装依赖
npm i css-loader style-loader -D
# css-loader    将css文件打包成commonjs对象
# style-loader  将css-loader打包好的样式通过<style>标签插入到head中

//webpack.config.js
module.exports={
    entry:"./src/app.js",
    output:{
        filename:"bundle.js",
        path:__dirname+"/dist"
    },
    mode:"development",
    module:{
        rules:[
            {
                test:/.js$/,
                use:'babel-loader'
            },
            {
                test:/.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
                /*注意：
                use内的loader执行是从下到上的，
                所以先执行css-loader然后才是style-loader*/
            }
        ]
    }
}

解析Less

# 安装依赖
npm i css-loader style-loader less-loader less -D
# css-loader    将css文件打包成commonjs对象
# style-loader  将css-loader打包好的样式通过<style>标签插入到head中
# less-loader   是将less转成css
# less          less核心（必装），less-loader依赖

//webpack.config.js
module.exports={
    entry:"./src/app.js",
    output:{
        filename:"bundle.js",
        path:__dirname+"/dist"
    },
    mode:"development",
    module:{
        rules:[
            {
                test:/.js$/,
                use:'babel-loader'
            },
            {
                test:/.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
                /*注意：
                use内的loader执行是从下到上的，
                首先将less转换成css
                然后将css转换成js
                然后将js封装为style标签
            }
        ]
    }
}

解析文件

# 安装依赖
npm i css-loader style-loader file-loader -D
# css-loader    将css文件打包成commonjs对象
# style-loader  将css-loader打包好的样式通过<style>标签插入到head中
# file-loader   将文件解析

//webpack.config.js
module.exports={
    entry:"./src/app.js",
    output:{
        filename:"bundle.js",
        path:__dirname+"/dist"
    },
    mode:"development",
    module:{
        rules:[
            {
                test:/.js$/,
                use:'babel-loader'
            },
            {
                test:/.css/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
                /*注意：
                use内的loader执行是从下到上的，
                首先将less转换成css
                然后将css转换成js*/
            },
            {
                test:/.(png|jpg|gif|jpeg|ttf|eot)$/,
                use:[
                    'file-loader'
                ]
            }
        ]
    }
}

更好的解析文件

# 安装依赖
npm i css-loader style-loader url-loader -D
# css-loader    将css文件打包成commonjs对象
# style-loader  将css-loader打包好的样式通过<style>标签插入到head中
# url-loader    更好的文件解析，代替file-loader

//webpack.config.js
module.exports={
    entry:"./src/app.js",
    output:{
        filename:"bundle.js",
        path:__dirname+"/dist"
    },
    mode:"development",
    module:{
        rules:[
            {
                test:/.js$/,
                use:'babel-loader'
            },
            {
                test:/.css/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
                /*注意：
                use内的loader执行是从下到上的，
                首先将less转换成css
                然后将css转换成js*/
            },
            {
                test:/.(png|jpg|gif|jpeg|ttf|eot)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            limit:10240 //单位B
                        }
                        /*
                            url-loader 与file-loader功能一样，不过他有一定很不错，
                            可以传入参数：
                                limit：单位字节，如果文件小于给定的字节大小，就进行
                                base64转换
                        */
                    }
                ]
            }
        ]
    }
}

自动打包

两种方法：

• 命令行：webpack —watch
• 配置文件：watch:true

原理：

​ webpack轮询（每隔一定的时间）对当前文件夹下的文件的修改时间进行监听，如果某个文件发生了变化，webpack不会立即打包而是在缓存时间到后才去打包。

//webpack.config.js
module.export = {
    watch:true,//开启监听
    watchOptions:{
        ignored:/node_modules/.//默认为空，表示不对什么文件夹或文件监听，支持正则表达式        aggregateTimeout:300,//监听触发后等300ms后执行打包，默认300ms
        poll:1000,//轮询时间，单位ms
    }
}

热重载

方法一

​ webpack-dev-server开发者服务

优势：

• webpack-dev-server不刷新浏览器
• webpack-dev-server文件放到内存

依赖插件：

​ HotModuleReplacementPlugin

​ HMRP 是将打包后的文件放到内存里，通过websocket将内容发给浏览器，实现热重载。

操作：

//webpack.config.js
const {HotModuleReplacementPlugin} = require('webpack');

module.exports={
    entry:"./src/app.js",
    output:{
        filename:"bundle.js",
        path:__dirname+"/dist"
    },
    mode:"development",
    module:{
        rules:[
            {
                test:/.js$/,
                use:'babel-loader'
            },
            {
                test:/.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test:/.(png|jpg)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            linmit:1024
                        }
                    }
                ]
            }
        ]
    },
    plugins:[
        new HotModuleReplacementPlugin()
    ],
    devServer:{
        contentBase:'./dist',//服务器根目录
        hot:true //是否热重载
    }
}

# 执行命令
npm i webpack-dev-server -g
webpack-dev-server --open
# --open 表示打开浏览器

方法二

/**
 * 另一种热重载的方法
 */
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const app = express();

const config = require('./webpack.config');

app.use(webpackDevMiddleware(
    webpack(config),
    {
        publicPath:config.output.publicPath
    }
    ));

app.listen(8080, () => {
    console.log('Example app listening on port 8080!');
});

//Run app, then load http://localhost:8080 in a browser to see the output.

文件指纹

​ 打包后输出的文件名额外添加的后缀字符。

有什么用：

• 文件的版本管理。
• 文件缓存。

文件指纹如何生成

• hash：根据修改时间生成。
• chunkhash：根据entry生成。
• contenthash：根据文件内容生成。

如何用

说明：[hash:8] 8表示截取前8位。

/**
 * 生产环境配置
 */
const MiniCssExtractPulgin = require('mini-css-extract-plugin');

module.exports={
    entry:"./src/app.js",
    output:{
        filename:"bundle_[chunkhash:8].js",
        path:__dirname+"/dist"
    },
    mode:"production",
    module:{
        rules:[
            {
                test:/.js$/,
                use:'babel-loader'
            },
            {
                test:/.less$/,
                use:[
                    MiniCssExtractPulgin.loader,/*注意，这个loader时插件提供的*/
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test:/.(png|jpg)$/,
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            name:'./img/[name]_[hash:8].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins:[
        new MiniCssExtractPulgin({
            filename:'[name]_[contenthash:8].css'
        })
    ]
}

文件压缩

​ 文件压缩是将打包后的html、css、js文件进行压缩。

JS压缩

​ 使用UglifyjsWebpackPlugin这个插件进行压缩，webpack4生成环境下默认是开启的所以不需要配置。

CSS压缩

​ 需要OptimizeCssAssetsWebpackPlugin插件

​ 需要cssnanoCSS压缩加载器(核心)

# 安装依赖
npm i -D optimize-css-assets-webpack-plugin cssnano

//webpack.config.js
/**
 * 生产环境配置
 */
const MiniCssExtractPulgin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

module.exports={
    entry:"./src/app.js",
    output:{
        filename:"bundle_[chunkhash:8].js",
        path:__dirname+"/dist"
    },
    mode:"production",
    module:{
        rules:[
            {
                test:/.js$/,
                use:'babel-loader'
            },
            {
                test:/.less$/,
                use:[
                    MiniCssExtractPulgin.loader,
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test:/.(png|jpg)$/,
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            name:'./img/[name]_[hash:8].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins:[
        new MiniCssExtractPulgin({
            filename:'[name]_[contenthash:8].css'
        }),
        new OptimizeCssAssetsWebpackPlugin({
            /*作用于打包后的文件*/
            assetNameRegExp:/.css$/g,
            /*匹配打包后的文件*/
            cssProcessor:require('cssnano')
            /*使用cssnano压缩处理器*/
        })
        /*
            注意：是先有打包文件，才能进行压缩。
        */
    ]
}  

​

HTMlL压缩

​ 通过使用HtmlWebpackPlugin，设置参数进行压缩。

html-webpack-plugin配置表：

miniify配置表：

默认情况下，大多数选项都是禁用的。

//webpack.config.js
/**
 * 生产环境配置
 */
const MiniCssExtractPulgin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports={
    entry:{index:"./src/app.js"},
    output:{
        filename:"bundle_[chunkhash:8].js",
        path:__dirname+"/dist"
    },
    mode:"production",
    module:{
        rules:[
            {
                test:/.js$/,
                use:'babel-loader'
            },
            {
                test:/.less$/,
                use:[
                    MiniCssExtractPulgin.loader,
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test:/.(png|jpg)$/,
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            name:'./img/[name]_[hash:8].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins:[
        new MiniCssExtractPulgin({
            filename:'[name]_[contenthash:8].css'
        }),
        new OptimizeCssAssetsWebpackPlugin({
            assetNameRegExp:/.css$/g,
            cssProcessor:require('cssnano')
        }),
        new HtmlWebpackPlugin({
            title:'webpack学习',
            template:path.join(__dirname,'src/index.html'),
            filename:'index.html',
            chunks:['index'],
            /**
             * 这里需要注意一下，如果entry写法是这样的：{index:'src/index.js'}那这里就需要使用chunks:['index']
             * 如果entry写法是: 'src/index.js' 那这里就不需要使用chunks
             * 
             * 如果不按照上面的规定，下面的inject:true将不会生效
             */
            inject:true,
            /**自动注入js与css */
            minify:{
                html5:true,
                collapseWhitespace:true,
                preserveLineBreaks:false,
                minifyCSS:true,
                minifyJS:true,
                removeComments:false
            }
        })
    ]
}

结束

到这里webpack的基础用法已经写完了，接下来我会继续更新，webpack的进阶用法。

如果你感觉我的文章对你有用，你可以点下面的大拇指给我鼓励，谢谢。

如果想要转载，请标明出处