带你入门Webpack及它能干什么?

1,884 阅读6分钟

前言

初衷: 本文我们讲一下Webpack,说说它能干什么及为什么要使用它。把我整理的笔记分享给大家,如有错误请各位指出,不喜勿喷。

适合人群: 前端初级开发,大佬绕道。

本文讲解是Webpack4.x,注意版本。

为什么要使用Webpack

在之前我们都是用传统的方式去开发一个系统,htmlcssjs,就这些。开发完之后直接给后台人员去部署,当然这没什么问题。当我们的项目需求不断增加,代码也就越多,越不好维护,一个文件代码都上百甚至上千行,里面代码甚至都是重复的,还需要担心script标签依赖顺序问题,还需要担心代码变量污染问题,这时就出来了模块化,防止变量污染及依赖顺序问题,而现在主流打包工具就是Webpack,强大的社区支撑且支持Es ModuleCommonJsAMD规范。

什么是Webpack

Webpack是一个模块打包工具,可以将Es ModuleCommonJs的语法处理成浏览器可以运行的代码,把文件相关联的依赖打包成一个js文件。

Webpack能干什么

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

安装

安装Webpack环境也非常的简单,一般情况下建议本地安装,全局安装可能会跟别的项目起冲突,尽量本地安装。

cnpm i webpack@4 webpack-cli --save

上面安装的webpack是语法,webpack-cli是命令行操作的执行命令

安装完之后,不能直接webpack -v这样会报错, 因为它会去全局找你的webpack环境,但你现在是本地安装,使用npx webpack -v这样会在你项目进行本地查找。

快速上手

初始化package.json文件

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

npm init

项目结构

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

Entry

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

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

loader是什么,以上我们只说了js相关的,Webpack默认只认识js文件,那么Webpack怎么打包js之外的东西呢,打包js之外的就会报错,这怎么办呢,这时候使用loaderloader是一个转换器,我们下面以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标签上,这时在看代码就会生效。

Plugins

clean-webpack-plugin

这时如果我们把output里面的filename修改之后,再次打包,可以看到之前的dist包里面的旧代码还依然存在,这时我们想每次打包都生成一个新的dist目录,这时就需要用到插件了。

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

npm i clean-webpack-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目录下还是一些原来的文件htmlcssjs,直接把dist包给后台部署就行。

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

感谢

谢谢你读完本篇文章,希望对你能有所帮助,如有问题欢迎各位指正。

我是蛙人(✿◡‿◡),如果觉得写得可以的话,请点个赞吧❤。

感兴趣的小伙伴可以加入 [ 前端娱乐圈交流群 ] 欢迎大家一起来交流讨论

写作不易,「点赞」+「在看」+「转发」 谢谢支持❤

往期好文

《聊聊在Vue项目中使用Decorator装饰器》

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

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

《这些工作中用到的JavaScript小技巧你都知道吗?》

《【建议收藏】分享一些工作中常用的Git命令及特殊问题场景怎么解决》

《你真的了解ES6中的函数特性么?》