webpack详解

最新推荐文章于 2024-07-19 03:05:15 发布

A-Select °

最新推荐文章于 2024-07-19 03:05:15 发布

阅读量163

点赞数

本文链接：https://blog.csdn.net/weixin_45959504/article/details/113249746

版权

什么是Webpack

WebPack可以看做是 模块打包器 ：主要是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

webpack，gulp/grunt，npm，它们有什么区别?

webpack 是模块打包器（module bundler），把所有的模块打包成一个或少量文件，使你只需加载少量文件即可运行整个应用，而无需像之前那样加载大量的图片，css文件，js文件，字体文件等等。
而gulp／grunt 是自动化构建工具，或者叫任务运行器（task runner），是把你所有重复的手动操作让代码来做，例如压缩JS代码、CSS代码，代码检查、代码编译等等，自动化构建工具并不能把所有模块打包到一起，也不能构建不同模块之间的依赖图。两者来比较的话，gulp/grunt 无法做模块打包的事。
webpack 虽然有 loader 和 plugin可以做一部分 gulp／grunt 能做的事，但是webpack 的插件还是不如 gulp／grunt 的插件丰富，能做的事比较有限。于是有人两者结合着用，将 webpack 放到 gulp／grunt 中用。然而，更好的方法是用 npm scripts 取代 gulp／grunt，npm 是 node 的包管理器 (node package manager)，用于管理 node 的第三方软件包，npm 对于任务命令的良好支持让你最终省却了编写任务代码的必要，取而代之的，是老祖宗的几个命令行，仅靠几句命令行就足以完成你的模块打包和自动化构建的所有需求。

webpack最基本的应用：

全局使用

1、全局安装webpack：

cnpm install webpack -g

2、创建项目：

mkdir app

在 app 目录下添加 runoob1.js 文件，代码如下：

document.write("It works.");

在 app 目录下添加 index.html 文件，代码如下：

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

接下来我们使用 webpack 命令来打包：

webpack runoob1.js bundle.js

执行以上命令会编译 runoob1.js 文件并生成bundle.js 文件，成功后输出信息如下所示：

Hash: a41c6217554e666594cb
Version: webpack 1.12.13
Time: 50ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
   [0] ./runoob1.js 29 bytes {0} [built]

在浏览器中打开 index.html，输出结果如下：
在这里插入图片描述
webpack的使用，最复杂的一部分是莫过于它的配置项。webpack通过你的配置项，放置所有与打包相关的信息。一个基本的配置包括：

module.exports = {
        entry: '',
        output: {},
        module: {
            rules: []
        },
        plugins: [],
};

你如果要打包一个文件，那首先要指定文件的地址，也就是entry；打包之后放在那里呢，也就是output；打包过程中文件要经过怎么样的处理，也就是rules中的loader；如何能够使webpack打包更快，体积更小呢，也就是plugins。这些配置相辅相成，紧密结合。

详解：
1、entry（项目入口）

字符串，如entry:"./src/index.js"

数组形式：如entry:[react, react-dom],可以把数组中的多个文件打包转换为一个chunk

对象形式，如果需要配置的是多页的应用，或者我们抽离出指定模块作为指定公共代码，需要采用这种形式，属性名是占位符[name]的值

在这里插入图片描述

2. output（出口文件）

会告诉webpack在哪里输出所创建的bundle.js以及如何命名
　　在这里插入图片描述
3. module（模块的处理）

webpack只能处理js文件，浏览器也可能不识别一些最新的js语法，所以我们就要对传入的模块做一些预处理，这就涉及到了webpack的又一核心概念“loader”’

loader的作用和基本用法
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

loader的配置主要在module.rules中进行，这是一个数组，每一个rule做了两件事

识别文件类型，来确定具体处理该数据的loader(Rule.test属性)
使用相关的loader对文件进行相关的操作转换(Rule.use属性）

module: {

　　rules:[{

　　　　test: /(\.jsx|\.js)/,  //表示匹配规则，是一个正则表达式

　　　　use:{   　　　　 //表示针对匹配文件将使用处理的loader

　　　　　　loader: "babel-loader",　　

　　　　　　options: {

　　　　　　　　presets: ["es2015", "react"]

　　　　　　}

　　　　}

　　}]

}

常用的loader：

转换编译：script-loader, babel-loader,ts-loader,coffee-loader

处理样式：style-loader,css-loader,less-loader,sass-loader,postcss-loader

处理文件：raw–loader,url-loader,file-loader

处理数据：csv-loader,xml-loader

处理模板语言：html-loader,pug-loader,jade-loader,markdown-loader

清理和测试：mocha-loader,eslint-loader

此外还有许多loader，可以到loader文档里查询

4. plugin（loader不能做的处理都能交给plugin来做）
webpack插件(自动打开浏览器、热更新等)

const CleanWebpackPlugin = require("clean-webpack-plugin")

{

　　...

　　plugin:[

　　　　new webpack.DefinePlugin({

　　　　　　"process.env" : {

　　　　　　　　NODE_ENV: JSON.stringify("production")

　　　　　　}

　　　　}),
　　　　new CleanWebpackPlugin(["js"], {

　　　　　　root: __dirname + "/stu/",
　　　　　　verbose: true,
　　　　　　dry: false
　　　　})
　　]

}