webpack入门指南

最新推荐文章于 2024-04-26 22:17:01 发布
最新推荐文章于 2024-04-26 22:17:01 发布
阅读量152 收藏 1
点赞数
文章标签： webpack json 前端 ViewUI
原文链接：https://segmentfault.com/a/1190000007001641
版权

本文同步自我的博客http://joeray61.com

本文是一个简单的webpack入门教程，希望能够帮助webpack初学者快速上手。如有错误，敬请斧正。
本文所有的demo都可以在webpack-demo里找到，git clone之后需要执行npm install安装所有依赖包。

简介

webpack是一个模块打包工具，出自德国开发者Tobias Koppers之手，处理速度很快。在webpack看来，一切资源都可以是一个模块，不仅限于js文件。正是由于这些特点，使得webpack可以替代Grunt和Gulp，成为了目前业内最火的前端构建工具。

clipboard.png

安装

webpack可以安装到全局，也可以作为项目的依赖工具安装到项目中

// 全局安装
$ npm install -g webpack
$ npm install -g webpack-dev-server

如果报没有权限的话，在命令前面加上sudo就可以了

// 局部安装
$ npm install --save-dev webpack
$ npm install --save-dev webpack-dev-server

可以看到，我们在安装webpack的同时，也安装了webpack-dev-server。那么webpack-dev-server是什么呢？它是一个轻量级的基于express的node.js服务器，用来服务资源文件。不是必须的，但是建议一起安装。

命令行

$ webpack main.js bundle.js

以上是直接使用webpack命令行来进行打包的命令，把main.js构建成bundle.js，具体示例可以查看demo1，在文件夹中执行上方的命令即可。

webpack有一些参数是我们应该要知道的

  • webpack: 构建一次开发版本

  • webpack -p: 构建一次产品版本，与开发版本的区别是会对文件进行压缩

  • webpack -d: 添加source map

  • webpack --watch: 监听文件的改动，持续增量构建

  • webpack --colors: 让命令行的输出更好看一点（实际使用zsh的命令行时发现并没有区别）

配置文件

webpack还有很多强大的功能，这些都可以在命令行使用，但是如果都写在命令行，既不方便使用，也不能直观地反映各个配置项，这时候，就需要配置文件登场了。

webpack默认使用的配置文件名是webpack.config.js，也可以通过--config参数在命令行指定另一个命名的配置文件。配置文件其实也是一个模块，所有的构建信息都放在module.exports中。下面我们就来讲一讲各个重要的配置项。

以下各个示例请在各demo文件夹中执行webpack-dev-server进行查看

入口文件

入口文件的配置项名称是entry，代表了webpack给整个项目进行打包的一个主入口，可以搭配output属性指定的输出文件来使用

// webpack.config.js

module.exports = {
    entry: 'main.js',
    output: {
        filename: 'bundle.js'
    }
};

// index.html

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

// main.js

document.write('<h1>Hello Webpack!</h1>');

示例见demo2

多入口文件

在多页的应用中，我们需要有多个入口文件，这在webpack中也是可以支持的。

// webpack.config.js

module.exports = {
    entry: {
        profile: './profile.js',
        feed: './feed.js'
    },
    output: {
        filename: '[name].bundle.js'
    }
};

// feed.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo3-Feed</title>
</head>
<body>
    <script src="feed.bundle.js"></script>
</body>
</html>

// feed.js

document.write('<h1>Hello Feed!</h1>');

// profile.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo3-Profile</title>
</head>
<body>
    <script src="profile.bundle.js"></script>
</body>
</html>

// profile.js

document.write('<h1>Hello Profile!</h1>');

示例见demo3，在demo3文件夹中启动webpack-dev-server，访问localhost:8080/profile.html和localhost:8080/feed.html查看效果。

Loaders

Loaders顾名思义就是加载器，用于加载各种格式的文件，例如React使用的JSX，ES6和ES7，图片、CSS、JSON文件等，可谓是webpack中最核心的功能之一。官方文档中列出了所有可用的loaders。

loaders配置在module.exports中的module字段下（说起来有点绕，待会儿看代码就懂了），是一个数组，代表loader的集合，每一个loader有几个配置项：

  • test: 正则表达式，用于匹配文件的路径，一般都直接用来匹配文件后缀，在复杂的场景下，可以针对同一类型的不同文件做不同处理

  • loader: loader的名称，实际使用时可以省略-loader的后缀（例如css-loader，可以写成css）

  • include: 必须包含的文件路径

  • exclude: 不需要处理的文件路径

  • query: loader的额外设置选项

下面我介绍几个常用的loader。

CSS Loader

先安装style-loader和css-loader。其中，style-loader用来向 HTML 页面中插入<style>，css-loader用来读取 css 文件。

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

然后在webpack.config.js中配置loader

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style!css'
            }
        ]
    }
};

// index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo4</title>
</head>
<body>
    <h1>Hello World!</h1>
    <script src="bundle.js"></script>
</body>
</html>

// a.css

h1 {color: red;}

// main.js

require('./a.css');

示例见demo4，可以看到，多个loader之间用!连接。在本地用webpack-dev-server启动服务，访问localhost:8080可以看到h1中的字体颜色如a.css定义的那样显示红色

clipboard.png

这个 demo 中的 css 是对全局生效的，如果需要只对当前模块生效，就要用到我们下面介绍的css module。

CSS Module

近几年，模块化这个概念在前端被不断地被提及。模块化使得代码被分割成一个个更小的、独立的、可维护性更高的独立单元。相比于JS，CSS的模块化发展的相对慢一点。最近出现了一个叫做css modules的技术，在css模块中，所有的类名和动画名默认只对向前模块生效。webpack对css module提供了不错的支持，只需要在css-loader后面加上?module即可使用。如果要对全局生效，可以使用:global()，把选择器作为参数传入。

// webpack.config.js

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style!css?module'
            }
        ]
    }
};

// index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo5</title>
</head>
<body>
    <div class="foo">Foo</div>
    <div class="bar">Bar</div>
    <script src="bundle.js"></script>
</body>
</html>

// a.css

.foo {color: red;}
:global(.bar) {
    color: green;
}

// main.js

var style = require('./a.css');

document.write('<div class=' + style.foo + '>Module - Foo</div>');
document.write('<div class="bar">Module - Bar</div>');

需要注意的是，在main.js中使用时，必须用变量style.foo，直接写成class="foo"是不会生效的，因为a.css中的.foo的类名被编译了，所以导出的style.foo将不等于foo。

示例代码见demo5。在 demo5 的目录下执行webpack-dev-server，在浏览器中打开localhost:8080，可以看到对应的效果。

clipboard.png

Url Loader

先安装url-loader和file-loader

$ npm install --save-dev url-loader file-loader

注意，url-loader对file-loader有依赖，但是安装url-loader时不会自动安装file-loader，这里我暂时没有花时间去了解原因，先都手动安装吧。如果不安装file-loader，超过limit大小的文件将无法加载。

url-loader是一个文件加载器，我们可以给他设定一个limit，用来限定文件大小，文件小于这个大小时会被转换成一个Data Url，反之转换成普通url表示资源路径。我们常用url-loader来加载图片。

// webpack.config.js

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.(png|jpg)$/,
                loader: 'url-loader?limit=8192'
            }
        ]
    }
};

// index.html

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

// main.js

var img1 = new Image();
img1.src = require('./webpack.png');
document.body.appendChild(img1);

var img2 = new Image();
img2.src = require('./wade.jpg');
document.body.appendChild(img2);

示例代码见demo6。在demo6目录下运行webpack-dev-server，在浏览器中访问localhost:8080，审查元素可以看到，8k以下的图片使用了Data Url，8k以上的图片使用的是资源地址。

clipboard.png

Babel Loader

现如今，ES6、React可谓是红透半边天，说起ES6、React，就不得不提Babel了。Babel是一个 Javascript 编译工具，可以让你现在就能使用目前还未被浏览器完全支持的下一代JS（ES6/ES7）,或是基于 JS 进行扩展的 JSX 等。

我们先安装需要的包

$ npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react react react-dom

其中，babel-core是babel的核心功能，babel-loader是webpack使用的babel加载器，babel-preset-es2015和babel-preset-react是babel用来解析ES6和JSX的包，react和react-dom是开发react的依赖包。

// webpack.config.js

module.exports = {
    entry: './main.jsx',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js[x]?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
};

// index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo7</title>
</head>
<body>
    <div id="root"></div>
    <script src="bundle.js"></script>
</body>
</html>

// main.jsx

import React from 'react';
import {render} from 'react-dom';

render(
    <h1>Hello world!</h1>,
    document.querySelector('#root')
);

可以看到，在这个配置中，我们把babel-loader的配置写在query字段中。其实也可以直接写在loader字段中，loader: 'babel-loader?presets[]=es2015&presets[]=react'，但是这样就不是太清晰了，建议配置比较长时拿出来放到query字段中去。

示例代码见demo7，在demo7目录下执行webpack-dev-server，在浏览器中访问localhost:8080查看效果。

Plugins

plugins是webpack中另一个非常重要且又用的配置，它与loaders的区别在于，loader是用来加载文件的，会逐个文件处理，而plugins是作为webpack功能的补充，整个构建过程都在持续发挥作用。下面我来给大家介绍几个常用的插件。

UglifyJS Plugin

这个插件估计很多人看名字就猜出来了，是用于压缩 JS 代码的。它是webpack的内置插件，不需要安装就可以使用。

直接上代码吧:

// webpack.config.js

var webpack = require('webpack');
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    },
    plugins: [
        new UglifyJsPlugin()
    ]
};

// index.html

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

// main.js

var name = 'JoeRay61';
var age = 24;
document.write('My name is ' + name + ', I\'m ' + age + ' years old.');

示例代码见demo8。在demo8目录下执行webpack-dev-server，在浏览器中访问localhost:8080，打开开发这工具，可以看到bundle.js的代码被压缩成了一行，变量名也被替换了，说明插件生效了。

!function(r){function e(t){if(o[t])return o[t].exports;var n=o[t]={exports:{},id:t,loaded:!1};return r[t].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var o={};return e.m=r,e.c=o,e.p="",e(0)}([function(r,e){var o="JoeRay61",t=24;document.write("My name is "+o+", I'm "+t+" years old.")}]);

Feature Flags

想象这样一种场景，我们希望在开发环境中在代码中输出一些调试信息，那么如何在webpack中实现呢。这时候就需要用上Feature Flags。它是借由webpack的自定义插件机制实现的全局环境变量，我们可以在代码中判这些全局变量的值来实现定制化的功能。

// webpack.config.js

var webpack = require('webpack');
var flags = new webpack.DefinePlugin({
    __PROD__: JSON.stringify(JSON.parse(process.env.PROD || 'false'))
});

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    },
    plugins: [flags]
};

// index.html

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

// main.js

document.write('<h1>Hello world!</h1>');
if (!__PROD__) {
    document.write('<p>it is dev version</p>');
}

示例代码见demo9。进入demo9目录，分别执行PROD=1 webpack-dev-server和webpack-dev-server，在浏览器中访问localhost:8080，可以看到区别。

clipboard.png
clipboard.png

Hot Module Replacement

HMR是webpack中一个激动人心的功能，中文直译叫模块热替换，是指配合webpack-dev-server的服务器，在你修改了项目的模块之后，不需要手动刷新页面，即可以看到更新后的效果，有效地提升了开发效率。

配合webpack-dev-server，我们有2种方式可以启用该功能：

  1. 在命令中中webpack-dev-server命令后面追加--hot和--inline参数

    • --hot: 添加HMR插件，将服务器切换到 hot 模式

    • --inline: 将webpack-dev-server的 runtime 加入到打包后的文件中

    • --hot --inline: 当这两个参数并存时，会额外添加一个webpack/hot/dev-server的entry

  2. 配置webpack.config.js

    • 添加new webpack.HotModuleReplacementPlugin()插件

    • 添加webpack/hot/dev-server和webpack-dev-server/client?http://localhost:8080这2个entry

    针对第2中方式我们来测试一下：

// webpack.config.js

var webpack = require('webpack');

module.exports = {
    entry: [
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8080',
        './main.js'
    ],
    output: {
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};

// index.html

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

// main.js

document.write('<h1>Hello world!</h1>');

注意，测试过程中我发现，如果原来是全局安装的webpack-dev-server，必须要在项目中局部安装webpack-dev-server，否则启动服务器时会报错
安装命令$ npm install --save-dev webpack-dev-server

示例代码见demo10。在demo10目录下，执行webpack-dev-server，在浏览器中查看localhost:8080，发现输出Hello world!，这时候不要关闭服务器，直接修改main.js的代码，保存后查看浏览器效果，发现虽然没有手动刷新页面，但是效果已经出来了。

Commons Chunk Plugin

当几个不同的脚本有公共的部分时，我们可以把公共部分抽出来放到一个单独的文件中。

// webpack.config.js

var webpack = require('webpack');

module.exports = {
    entry: {
        index: './index.js',
        main: './main.js'
    },
    output: {
        filename: '[name].bundle.js'
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin('common.js')
    ]
};

// index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo11</title>
</head>
<body>
    <script src="common.js"></script>
    <script src="index.bundle.js"></script>
    <script src="main.bundle.js"></script>
</body>
</html>

// index.js

var data = require('./data');
document.write('<p>foo is ' + data.foo + '</p>');

// main.js

var data = require('./data');
document.write('<p>bar is ' + data.bar + '</p>');

// data.js

var data = {
    foo: 123,
    bar: 456
};

module.exports = data;

具体示例见demo11。在demo11目录下执行webpack-dev-server，在浏览器中访问localhost:8080，打开开发者工具，发现data.js被抽出单独放到了common.js中。

总结

本文是我自己学习webpack的一个笔记，我把它记录下来，希望能给其他的webpack初学者提供一点帮助，谢谢观看，欢迎交流！

weixin_33785108
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack入门+react环境配置
12-10
小结放在前：这篇文章主要是为下一篇的react提前铺好路，webpack是一个前端资源模块化管理和打包工具，说白了就是方便我们管理自己的常用的一些代码，比如你开发中用到sass以及jade同时用到es6，开发时你不可能改动...
webpack学习
andywang821017的博客
12-13 90
一、什么是webpack？ 　　Webpack 是德国开发者 Tobias Koppers 开发的模块加载器Instagram 工程师认为这个方案很棒, 似乎还把作者招过去了在 Webpack 当中, 所有的资源都被当作是模块, js, css, 图片等等..因此, Webpack 当中 js 可以引用 css, css 中可以嵌入图片 dataUrl。 　　Webpack 是一个前...
Webpack模块加载器
weixin_34337265的博客
04-18 85
一、介绍 Webpack是德国开发者 Tobias Koppers 开发的模块加载器，它能把所有的资源文件（JS、JSX、CSS、CoffeeScript、Less、Sass、Image等）都作为模块来使用和处理。 作为一个模块打包工具，主要功能是打包资源文件并整合到一个包中，我们在开发时，只需要引用一个包文件，就能加载预先设计好的模块功能。 二、安装 不同文件类型的资源，Webpac...
Feature Flags
BLOG域名:programb.blog.csdn.net
04-22 1677
RabbitMQ Features Get Started Support Community Docs Blog Overview In a mixed version cluster (e.g. some versions are 3.7.x and some are 3.8.x) some nodes will support a different set of features, be...
webpack 入门指南
09-03 479
什么是 webpack？ webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。 我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但我们无须在上面花费太多心思，因为 webpack 有着各种健全的加载器（loader）在
React+Webpack快速上手指南(小结)
10-18
主要介绍了React+Webpack快速上手指南(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack-guide:webpack官网-入门指南
05-16
安装webpack // 推荐本地安装 // webpack-cli 在命令行中使用webpack npm install --save-dev webpack webpack-cli
vue使用外部的模板
youhebuke225的博客
04-26 189
在 Vue 2 中，没有直接内置的方式来使用外部 HTML 文件作为组件的模板。你通常需要结合前端工程化工具（如 Webpack）或使用 AJAX 等技术来实现。每种方法都有其适用场景和限制，你需要根据你的项目需求来选择最合适的方法。同时，无论使用哪种方法，都要确保外部 HTML 内容的安全性，避免潜在的安全风险。
面试的时间地点（南京坦道）工程化问题比较少，通用性问题表较多
qq_41323267的博客
04-26 107
6.前端的跨域（解决问题的方法和思路）2.前端的$nicktick（）4.前端的 VUE 高级用法。web端视图层的渲染原理。5.前端的数组，异步处理。es6的set（）；
webpack中mode、NODE_ENV、DefinePlugin、cross-env的使用
前端蜗牛君
04-23 438
mode是设置执行模式，webpack4会自动将mode的值通过设置为全局变量，业务代码中可以使用process.env.NODE_ENV读取值。NODE_ENV是设置Node环境变量，在webpack.config.js、webpack.dev.js等文件中通过读取值。cross-env是用来解决跨环境的。用来设置全局变量，在业务代码中通过读取值。
webpack 打包优化 - splitChunks
weixin_54714100的博客
04-19 1036
webpack5 默认情况下只对异步模块做打包优化，额外的打包必须满足 4 个条件（webpack 的默认配置，可修改）。根据需求可调整为只对初始模块做打包优化，或者初始和异步模块一起优化。同时可配置自己的打包规则。简而言之：chunks 控制打包作用范围，其他控制打包规则。webpack5 的 splitChunks 功能是比较强大的，不过推荐还是使用默认模式，或者提取一下第三方库。
webpack前端性能优化- HappyPack多线程打包-打包速度提升n倍
阿牛哥的博客
04-26 153
webpack前端性能优化- HappyPack多线程打包-打包速度提升n倍
【React】反向代理和修改打包后的目录
最新发布
小秀的博客
04-26 282
由于我的前端静态资源以 static 开头，但是 create-react-app（基于 webpack）默认在打包应用时，也会将打包好的资源放置到打包后的 static 目录下，导致在加载打包后的资源时，不在前端打包资源中寻找，而是进行了请求转发（反向代理），按着前端的打包资源地址，去服务端请求资源，导致请求不到资源，报错。可以将 static 修改为其他名称，比如这里修改为了 assets。之后再次执行命令就可以了，webpack 等相关配置全部显现。这时我们需要将 git 仓库的文件提交一下。
vue.config.js自定义插件和自定义vue-cli-service命令
lyj168997的博客
04-26 123
自定义vue-cli-service命令。
前端面试题合集
Anislandwhale的博客
04-26 579
对日常面试中，经常会遇见的面试题进行了一些收集，并附上相关的回答，提供个正在求职的前端宝子们，一些参考，会时常更新
webpack和vite
WZH15075051915的博客
04-26 271
是一个快速、轻量级的现代Web开发构建工具，它利用现代浏览器的原生ES模块加载功能，实现了开发环境中的快速冷重载和构建速度。相比于Webpack的构建过程，Vite的开发速度更快，也更适合小型、简单的项目。具有很高的可配置性和灵活性，使得开发者可以使用各种插件和配置文件来优化它们的工作流程。Webpack适用于大型、复杂的项目，它可以处理多种不同类型的文件（如js、css、图片等），并根据需求进行转换、压缩和打包。但是，Webpack的配置可能比较复杂，需要花费一定的时间和精力进行学习和调试。
打包的意义 作用等前端概念集合 webpack基础配置等
Beatingworldline的博客
04-26 227
model 是一个参数项，用来指定 webpack 的运行模式。production 代表生产环境，会对打包生成的文件进行代码压缩和性能优化。注意：通过 --model 指定的参数项，会覆盖 webpack.config.js 中的 model 选项。
webpack 入门
08-21
如果想快速入门Webpack，你可以按照以下步骤进行操作： 1. 安装Webpack和webpack命令行工具。 2. 在项目根目录下创建一个webpack.config.js文件，并配置Webpack的入口和出口文件以及其他需要的选项。 3. 在package....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值