Webpack - 基础功能使用

最新推荐文章于 2024-03-01 15:27:00 发布

林崖

最新推荐文章于 2024-03-01 15:27:00 发布

阅读量171

点赞数

分类专栏： Webpack

本文链接：https://blog.csdn.net/CDTZYXZZY/article/details/103329579

版权

Webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

WebPack - 基础功能

一、认识webpack

webpack中文网
注意：blog只是作为自己的参考，大多是基础配置。有时间还是要在官网上看一遍的。只是官网上不会有我遇到问题、解决问题做的理解注释，但很多灵活的用法，不是一两篇blog能记录的，而且也没有必要。需要的时候去官网查看就好了

**概念：**webpack 是一个JS应用程序的静态模块打包器。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

除了根据依赖关系搜索模块并将其打包之外，还可以将其它的一些浏览器不能直接运行的扩展语言（Scss,TypeScript等）转换和打包为合适的格式供浏览器使用。

webpack与Grunt和Gulp的比较
Grunt和Gulp的工作方式是:在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

1.1 webpack核心概念

参考：webpack中文网

入口(entry)
- 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的
输出(output)
- 告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件
loader
- 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
插件(plugins)
- loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

二、开始

全局安装：npm install -g webpack
项目依赖安装：npm install --save-dev webpack

安装完成之后通过webpack -v检验是否安装成功，如果失败，可能是因为webpack版本的问题，webpack版本更新后还需要安装webpack-cli。

npm install webpack-cli -g

但是！！出现这种情况，webpack版本一般在4.0以上，非常不稳定，并且有些需要使用的loader还是低版本，并不适用。所以，需要降低webpack的版本（全局和项目的版本都要降低）:npm install webpack@3.6.0 -g

全局安装完成之后为什么还要局部安装？

在终端直接执行webpack命令，使用的是全局安装的webpack
当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack

2.1 使用前准备

npm init: 生成package.json文件。
- package.json文件包含单前项目的依赖模块，自定义的脚本任务等
  生成package.json的时候会让你输入很多信息，具体的信息含义可以参考：OSCHINA-npm init初始化项目。
  可以先随便填一填，之后是可以修改的。

创建测试项目：

app
- Greeter.js
- main.js
  - 引入了Greeter.js
public
- index.html

// app/Greeter.js
// Greeter.js
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};

// app/main.js
//main.js 
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());

// public/index.html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root'>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

2.2 简单的打包命令

webpack ./app/main.js ./public/bundle.js
含义：以 main.js 作为入口文件，根据依赖关系构建依赖图；以 bundle.js 作为出口文件，将依赖图中的文件打包到 bundle.js 出口文件中

2.3 通过配置文件来使用Webpack

通过命令行来打包不仅繁琐容易出错，而且有很多功能不方便使用。我们采用配置文件webpack.config.js来管理项目中文件打包这一过程

webpack.config.js文件需要手动创建，每次运行webpack命令时都会自动查找这个文件

// 引入node的包，获取当前文件绝对路径
const path = require('path')
module.exports = {
    entry : './app/main.js',
    output : {
        // 绝对路径，通过node模块获取
        // __dirname表示当前文件所在绝对路径，resolve可以使字符串拼接
        // 也可以写成 ： __dirname + 'public'
        path: path.resolve(__dirname,"public"),
        filename: 'bundle.js'
    }
    
}

2.4 loader

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！
对于我暂时来说，用途就是将Sass/less转化成css文件。

步骤一、安装对应loader，参考：webpack中文网-loader
如果有需要的loader可以到其中寻找

以打包less文件为例，首先需要安装对应loader；

npm install --save-dev less less-loader css-loader style-loader

步骤二、配置webpack.config.js

const path = require('path');
module.exports = {
    entry : './app/main.js',
    output : {
        // 绝对路径，通过node模块获取
        // __dirname表示当前文件所在绝对路径，resolve可以使字符串拼接
        path: path.resolve(__dirname,"public"),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.less$/,
            // 注意顺序
            use: ["style-loader", "css-loader", "less-loader"]
        }]
    }

}

步骤三、将less文件引入入口文件main.js中
** 注意：引入的时候路径需要“./”字符，不然会出错 **

// 注意：引入的时候路径需要“./”字符，不然会出错
import './test.less'

步骤四、执行webpack开始打包
之后，直接在命令行输入webpack就可以自动执行了
webpack中文网 - sass-loader的安装：

2.5 webpack构建本地服务器

作用：让你的浏览器监听你的代码的修改，并自动刷新显示修改后的结果。

步骤一、安装：npm install --save-dev webpack-dev-server
步骤二、配置：在webpack.config.js文件中添加配置信息

devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    }

出现错误：打开的网页中显示Cannot Get /

这可能是配置信息中contentBase配置错误
1. 开始的时候，没有注意webpack.config.js与public的相对位置，导致出错
2. 注意写法，__dirname+"public"这样的不行
3. path.resolve(__dirname, "public")
4. "./public"

步骤三、在package.json中配置scripts，方便执行命令行命令："server": "webpack-dev-server --open"