和我一起学习Webpack4.0(一) —— 初识Webpack

栏目: 编程语言 · 发布时间: 5年前

内容简介:Webpack is a module bundler. It packs CommonJs/AMD modules i. e. for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand.这一段是官网的介绍,翻译过来就是Webpack是一个模块打包工具。它可以打包CommonJs/AMD等浏览器不能直接支持的模块化标准。它可以让你把代码拆分成多个包,可实现按需加载。这

一、Webpack是什么?

Webpack is a module bundler. It packs CommonJs/AMD modules i. e. for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand.

这一段是官网的介绍,翻译过来就是Webpack是一个模块打包工具。它可以打包CommonJs/AMD等浏览器不能直接支持的模块化标准。它可以让你把代码拆分成多个包,可实现按需加载。

二、环境搭建

1.node.js和npm

这个没什么多说的了,官网下载安装node.js即可,同时npm也会自动装好。

2.npm初始化

npm init

初始化过程中会让你填许多信息,不想填的话直接在命令后面加上-y会自动生成package.json文件。

3.安装webpack

webpack有两种安装方法,一个是全局安装,一个是本地安装。官方推荐本地安装,实际上本地安装是比较合理的,因为如果两个不同的项目用到的webpack版本不同的话,全局安装无法满足需求。

npm install webpack webpack-cli -D

webpack-cli的作用是让我们可以在命令行中正确的使用webpack这个命令。

如果想查看本地项目的webpack版本:

npx webpack -v

npx这个命令会帮我们在当前项目的node_modules目录下去找webpack。

三、简单示例

首先我在npm init后的目录中创建3个文件:

  • index.html
  • index.js
  • module.js
// index.js

import a from './module'

console.log(a)
// module.js

const a = 123

export default a

在index.html引入index.js,然后用浏览器打开,发现报错了。这是因为浏览器无法直接识别ES6 module的语法。

此时我们使用命令:

npx webpack index.js

会发现根目录下生成了一个dist文件夹,里面有一个main.js文件,在index.html引入这个main.js后再打开浏览器,发现控制台打印了123。

这样我们就看到了webpack的作用,webpack可以帮我们打包浏览器无法识别的模块化语法,让我们可以把代码分割成一个一个的包的形式。

四、配置文件简单介绍

在简单示例中我们没有配置任何东西webpack也打包成功了,这是因为webpack有默认的打包配置,当项目变得非常复杂的时候,我们需要许多配置项来帮助我们,默认的配置文件名为 webpack.config.js ,在根目录下创建:

const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

这样配置以后使用npx webpack就可以让webpack按照自己期望的样子打包了。

如果配置文件名不想用webpack.config.js,可以使用:

npx webpack --config 配置文件名

我们用webpack打包时一直有一个警告,是因为我们没有指定mode,mode可以选择'production'和'development',默认为'production',区别就是打包出来的文件是否压缩。


以上所述就是小编给大家介绍的《和我一起学习Webpack4.0(一) —— 初识Webpack》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

锦绣蓝图

锦绣蓝图

[美] 沃德科 (Christina Wodtke)、[美] 戈夫拉 (Austin Govella) / 蔡芳 / 人民邮电出版社 / 2009-11-01 / 59.00

Web 2.0和社会化大趋势下,你的网站发展喜人,但是问题也接踵而来:信息变得越来越庞杂无序,业务流程愈加复杂,搜索和导航越来越难,用户对使用体验的要求也越来越高……怎么办? 作者非常通俗易懂地讲述了如何规划易用的网站及其背后的信息架构原理。首先介绍了建立信息架构的八项基本原则,然后重点强调了组织系统和元数据在信息架构中的作用,并指出设计搜索和导航需要考虑的问题和方法,另外还补充了当今热门的......一起来看看 《锦绣蓝图》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

在线进制转换器
在线进制转换器

各进制数互转换器