webpack教程

来源：互联网发布：诺亚知乎编辑：程序博客网时间：2024/06/05 04:46

现在前端有很多流行的打包工具，grunt，gulp，webpack，三种打包工具选择自己比较喜欢的就可以。下面讲解下webpack的安装和使用方法。首先我们知道，webpack是基于nodeJs的，所以使用webpack的时候我们需要安装node，可以去官网下载，然后安装，安装过程非常简单。这里放下官网的下载的地址：https://nodejs.org/en/download/。安装完后，我们需要检查下node安装是否成功，使用window+r打开命令行，然后输入node -version 查看node的版本，出现版本号表明安装成功，具体的安装的步骤可以去看我写的gulp的安装教程。

node安装成功后就需要运行命令：

cnpm install webpack -g

安装成功之后使用mkdir app （在当前目录创建一个app的文件夹）在app文件下创建runoob1.js的js文件和index.html文件，然后要cd到app文件夹下面使用

webpack runoob1.js bundle.js  进行打包

解释下这个地方的含义：将runoob1.js进行编译并生成bundle.js

html部分：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>webpack测试</title></head><body><script src="bundle.js"></script></body></html>

js部分：

document.write('测试，好low！');

打包成功后出现下图所示的结果表示打包成功：

切尔奇翁

上图红色标出的部分是由于没有在app文件下执行语句。

再创建一个run的js文件：

module.exports= "这个是从run.js'"

然后修改runoob1.js的内容：document.write(require('./run.js'));再使用命令打包然后运行index.html

结果如下：

webpack 根据模块的依赖关系进行静态分析，这些文件(模块)会被包含到 bundle.js 文件中。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 runoob1.js 中的代码，其它模块会在运行 require 的时候再执行。

load机制：

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

所以如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他们做两件不同的事情，css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

接下来我们使用以下命令来安装 css-loader 和 style-loader(全局安装需要参数 -g)。

cnpm install css-loader style-loader

执行以上命令后，会再当前目录生成 node_modules 目录，它就是 css-loader 和 style-loader 的安装目录。

然后在创建一个style.css文件内容如下：

body{background:red;}

然后更改runoob1.js的内容为：

  require("!style-loader!css-loader!./style.css");

document.write(require('./run.js'));

然后使用webpack来打包webpackrunoob1.jsbundle.js

运行index.html效果如下：

require CSS 文件的时候都要写 loader 前缀 !style-loader!css-loader!，当然我们可以根据模块类型（扩展名）来自动绑定需要的 loader。将 runoob1.js 中的 require("!style-loader!css-loader!./style.css") 修改为 require("./style.css") ，命令行改为（webpackrunoob1.jsbundle.js --module-bind'css=style-loader!css-loader'）：当然两种方法的效果一样。

配置文件：

我们可以将一些编译选项放在配置文件中，以便于统一管理：

此处先介绍下__filename和__dirname的区别：

__filename变量:

node.js中，在任何模块文件内部，可以使用__filename变量获取当前模块文件的带有完整绝对路径的文件名。

在应用程序根目录下新建app.js文件，其中代码如下所示。

     var testModule1=require(‘./test/testModule.js’);

在应用程序根目录下新建一个test子目录，在该目录下新建一个testModule.js文件，其中代码如下所示。

     console.log(__filename);

在命令行窗口中输入“node app.js”命令并按下回车键，REPL运行环境中将显示testModule.js文件的完整文件名

__dirname ：
获得当前文件所在目录的完整目录名：

在应用程序根目录下新建app.js文件，其中代码如下所示。

var testModule1=require(‘./test/testModule.js’);

在应用程序根目录下新建一个test子目录，在该目录下新建一个testModule.js文件，其中代码如下所示。

console.log(__dirname);

在命令行窗口中输入“node app.js”命令并按下回车键，REPL运行环境中将显示testModule.js文件所在目录的完整绝对路径

创建 webpack.config.js 文件，代码如下所示：

module.exports = {entry:"./runoob1.js",output: {path: __dirname,filename: "bundle.js"},module: {loaders:[{test: /\.css$/, loader: "style-loader!css-loader" }]}};

配置完成之后可以直接运行webpack来进打包。
注意：这个地方的webpack.config.js是默认自己运行的，必须要写的正确，不能有错，要不运行webpack会报错！！

插件

插件在 webpack 的配置信息 plugins 选项中指定，用于完成一些 loader 不能完成的工。webpack 自带一些插件，你可以可以通过 cnpm 安装一些插件。

使用内置插件需要通过以下命令来安装：

cnpm install webpack --save-dev

此处介绍下plugins：

webpack中另一个非常重要的功能是Plugins。插件（Plugins）是用来拓展webpack功能的，它们会在整个构建过程中生效，执行相关的任务。Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西：Loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个;插件并不直接操作单个文件，它直接对整个构建过程其作用。webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能。

1、使用插件的方法

要使用某个插件，需要通过npm安装它，然后在webpack.config.js中的plugins关键字部分添加该插件的一个实例（plugins是一个数组，new一个插件即可）。如下：

var webpack=require('webpack'); module.exports = {    entry: "./runoob1.js",    output: {        path: __dirname,        filename: "bundle.js"    },    module: {        loaders: [            { test: /\.css$/, loader: "style-loader!css-loader" }        ]    },    plugins:[    new webpack.BannerPlugin('webpack 实例')    ]};

运行:webpack

打开bundle.js文件发现头部出现我们指定的注释信息

开发环境

当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色。

webpack --progress --colors

如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的。

webpack --progress --colors

当然，我们可以使用 webpack-dev-server 开发服务，这样我们就能通过 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。

 安装cnpm install webpack -dev-server -g

 运行webpack-dev-server --progress --colors

在浏览器打开http://localhost:8080/出现下图页面：

阅读全文

0 0