关于前端:带你入门Webpack及它能干什么

初衷： 本文咱们讲一下 Webpack，说说它能干什么及为什么要应用它。把我整顿的笔记分享给大家，如有谬误请各位指出，不喜勿喷。

适宜人群： 前端高级开发，大佬绕道。

本文解说是 Webpack4.x，留神版本。

在之前咱们都是用传统的形式去开发一个零碎，html、css、js，就这些。开发完之后间接给后盾人员去部署，当然这没什么问题。当咱们的我的项目需要一直减少，代码也就越多，越不好保护，一个文件代码都上百甚至上千行，外面代码甚至都是反复的, 还须要放心 script 标签依赖程序问题，还须要放心代码变量净化问题，这时就进去了模块化，避免变量净化及依赖程序问题，而当初支流打包工具就是 Webpack，弱小的社区撑持且反对Es Module、CommonJs、AMD 标准。

Webpack是一个模块打包工具，能够将 Es Module、CommonJs 的语法解决成浏览器能够运行的代码，把文件相关联的依赖打包成一个 js 文件。

利于咱们便捷开发，帮忙咱们在本地搭建一个服务，代码变动热更新及不刷新页面，全局注入依赖文件，代码宰割，代码提取，去除不必要的代码，辨别环境变量，图片优化等，社区弱小的插件扩大，帮忙咱们我的项目便捷开发。

装置 Webpack 环境也十分的简略，个别状况下倡议本地装置，全局装置可能会跟别的我的项目起抵触，尽量本地装置。

cnpm i webpack@4 webpack-cli --save

下面装置的 webpack 是语法，webpack-cli是命令行操作的执行命令

装置完之后，不能间接 webpack -v 这样会报错，因为它会去全局找你的 webpack 环境，但你当初是本地装置，应用 npx webpack -v 这样会在你我的项目进行本地查找。

在你的我的项目文件下执行该命令，进行对应填写(一路回车也能够)，傻瓜式操作。

npm init

|- /node_modules
|- /src
   |- index.js
   |- news.js
   |- index.css
|- index.html
|- webpack.config.js
|- package.json

entry 打包入口文件，打包入口有好几种模式，上面咱们来一一介绍它们。

单入口

module.exports = {entry: "./src/index.js"}

多入口

多入口打包，js文件名称则是对象的 key 值。

module.exports = {
    entry: {
        index: "./src/index.js",
        news: "./src/news.js"
    }
}

数组入口

数组打包，entry接管一个数组对象，外面参数只有最初一个值才是真正的打包门路，其它参数都是将本门路文件导入到最初一个参数外面

module.exports = {entry: ["./src/news.js", "./src/index.js"]
}

// 下面 entry 那种操作，等同于如下：// index.js
require("news.js")

下面 example 中，除了最初一个参数，将其它数组参数都导入到最初一个参数文件内

output有入口文件就得有进口文件，

module.exports = {
    output: {
        path: __dirname + "/dist",
        filname: "app.js"
    }
}

filename有几个名称选项，我来看介绍一下

[name] 应用入口文件名称
[chunkhash] 生成 hash 值，是通过以后文件所依赖的进行解析，最初生一个 chunk，在生成 hash 值
[contenthash] 当文件内容扭转值，hash 值才会扭转
[id] 应用 chunk id 生成文件名
[hash] 应用 hash 作为文件名称，每次生成的 hash 都不一样

module.exports = {
    output: {
        path: __dirname + "/dist",
        filname: "[name][id][contenthash].js"
    }
}

loader是什么，以上咱们只说了 js 相干的，Webpack默认只意识 js 文件，那么 Webpack 怎么打包 js 之外的货色呢，打包 js 之外的就会报错，这怎么办呢，这时候应用 loader，loader 是一个转换器，咱们上面以 css 文件为例子解说

test 接管一个正则表达式，匹配文件后缀名称，匹配胜利进入该 loader 执行
use 接管一个数组，当只有一个 loader 能够写成一个字符串

css-loader

装置

npm i css-loader --save-dev

应用

module.exports = {
     module: {
        rules: [
            {
                test: /\.css$/,
                use: ["css-loader"] or "css-loader"
            }
        ]
    }
}

配置完该 loader 不会报错了，然而代码还是不失效。只是解析了 css 文件，并没有将 style 挂载到页面上，须要联合style-loader。

style-loader

装置

npm i style-loader --save-dev

应用

module.exports = {
     module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            }
        ]
    }
}

下面 example 中，loader 必须有程序执行，loader 是从后往前执行的，先解析 css 文件，而后将解析完的 css 文件挂载到页面 style 标签上，这时在看代码就会失效。

clean-webpack-plugin

这时如果咱们把 output 外面的 filename 批改之后，再次打包，能够看到之前的 dist 包外面的旧代码还仍然存在，这时咱们想每次打包都生成一个新的 dist 目录，这时就须要用到插件了。

装置 clean-webpack-plugin 插件, 我本地装置是 3.0.0 的版本

npm i clean-wenpack-plugin --save-dev

应用

const {CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports = {
    plugins: [new CleanWebpackPlugin()
    ]
}

html-webpack-plugin

咱们打包完 dist 目录下没有，index.html文件，那么咱们能够应用该插件，在每次打包时都会生成一个 html 文件，上面咱们来装置一下

装置 html-webpack-plugin 我这里应用的是 3.2.0 版本，须要留神的是，你本地的 node 版本越高，装置的插件越新，可能新版本会跟 webpack4 有点不兼容甚至导致代码报错。

npm i html-webpack-plugin@3.2.0 --save-dev

应用

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',  // 以咱们本地的 index.html 文件为根底模板
            filename: "index.html",  // 输入到 dist 目录下的文件名称
        }),
    ]
}

html-webpack-plugin插件接管一个对象，这个对象有一些属性值，这里咱就不一一举例了，能够看这篇文章《html-webpack-plugin 用法全解》。

const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: "./src/index.js",
    output: {
        path: __dirname + "/dist",
        filename: "index.js"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            }
        ]
    },
    plugins: [new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: "index.html",
        }),
    ]
}

到这里咱们的 webpack 入门就讲完了，实现了一个简略的打包，webpack默认只意识 js 文件，要想应用 css 及图片，能够应用 loader 进行转换。能够看到最初打包完，dist目录下还是一些原来的文件 html、css、js，间接把dist 包给后盾部署就行。

更多罕用的 loader 之罕用 plugin 下期分享，记得关注我哟❤❤❤。

谢谢你读完本篇文章，心愿对你能有所帮忙，如有问题欢送各位斧正。

我是蛙人(✿◡‿◡)，如果感觉写得能够的话，请点个赞吧❤。

感兴趣的小伙伴能够退出前端娱乐圈交换群欢送大家一起来交换探讨

写作不易，「点赞」+「在看」+「转发」 谢谢反对❤

《聊聊在 Vue 我的项目中应用 Decorator 装璜器》

《聊聊什么是 CommonJs 和 Es Module 及它们的区别》

《带你轻松了解数据结构之 Map》

《这些工作中用到的 JavaScript 小技巧你都晓得吗？》

《【倡议珍藏】分享一些工作中罕用的 Git 命令及非凡问题场景怎么解决》

《你真的理解 ES6 中的函数个性么？》

关于前端:带你入门Webpack及它能干什么

前言

为什么要应用 Webpack

什么是 Webpack

Webpack 能干什么

装置

疾速上手

初始化 package.json 文件

我的项目构造

Entry

Output

Loader

Plugins

残缺代码

总结

感激

往期好文