Webpack 基本使用
模块化的由来
JS传值问题
在js当中,如果一个js文件的属性想要被另一个js文件获取到,那么只能通过window.属性
将该属性设置为全局变量以后才能够被另一个文件读取,然而这样是件极其不安全的事,因为极有可能发生变量值被覆盖这样的麻烦事。为此在node.js中提出了一切皆模块的观念,即所有的静态文件都被看做是模块,每个模块可以通过module.exports
暴露出值,也可以通过require(模块)
获取别的模块保留的值,举例:
- a.js
module.exports = {name:"aaa"};
// 将对象暴露出来
- b.js
var data = require('./a.js');
// b.js中获取a.js暴露出来的内容
console.log(data);
此时b.js就可以获取a.js中指定的数据了,但是上面的这段代码如果直接在浏览器中是无法执行的,因为require
是node里的关键词。此时就需要用到webpack将这段代码编译成浏览器能够执行的代码,执行命令为:webpack 入口文件(这里因为是b.js引用a.js的内容,所以是b.js) [生成的文件名,可选]
,然后就会生成一个bundle.js
(根据配置也可能是别的名字,比如main.js
)文件,里面将这两个文件进行了打包和加密,生成了一个新的文件,在html文件中引入这个bundle.js
即可成功实现上面的效果
Webpack介绍
通过上面的问题我们可以知道webpack是一个静态资源打包工具,在webpack中一切皆模块,包括js、图片等所有静态文件都是模块,即模块化开发(参考:https://www.cnblogs.com/moxiaowohuwei/p/8692359.html),然后将这些模块根据需要打包成对应的bundle.js
功能
1.打包代码
2.压缩代码
3.版本兼容编译
4.搭建脚手架
安装
安装webpack前需要先配置好node.js环境,然后输入下面命令:
npm install webpack webpack-cli -g
安装完成后输入下面命令查看是否安装成功:
webpack -v
webpack-cli -v
简单使用
通过命令:
webpack 入口文件 [生成的文件名,可选]
即可将文件打包成对应的bundle.js文件。但是这种方式如果是对应多个文件的情况时,一个个文件加在参数后面将十分冗长,可以建议通过文件配置方式打包文件,参考下面项目使用步骤
项目使用步骤
1.创建一个项目文件夹,在文件夹下通过命令:npm init -y
生成package.json
文件,再输入命令:npm i -D webpack webpack-cli
安装webpack和webpack-cli
2.创建一个文件夹名为modules
存放所有的模块
3.在modules
目录下创建各种js模块文件编写功能函数,并通过exports
方法导出模块
4.在modules
目录下创建main.js
文件作为js文件的入口模块,并通过require
方法获取模块,然后调用对应模块下的功能函数
5.创建webpack.config.js
配置文件,并在当中配置entry
属性(入口模块)和output
属性(输出文件路径)等
6.在命令行输入命令:webpack
,对文件资源进行打包(如果需要动态编译,则命令后面加上参数:--watch
),最终会在对应目录下生成bundle.js
文件
7.创建入口html文件并引用打包生成的js文件
webpack.config.js
文件属性
-
mode
:优化模式,包括development
(开发模式,会输出调试信息)、production
(生产模式,最高级别优化,包括压缩、忽略错误,默认模式)、none
(不优化) -
entry
:入口模块,单个模块则直接传入文件名字符串,多个的话可以传入对象 -
output
:输出文件,其下包括两个属性:path
(路径,要求必须为绝对路径)和filename
(文件名)
举例:
module.exports = {
entry: {
main: './b.js',
other: './c.js'
},
output: {
filename: '[name].bundle.js',
// [name]为entry对象里的属性名
path: __dirname + '/dist'
// __dirname为当前路径
}
}
加载CSS文件
步骤
1.安装style-loader
和css-loader
模块:npm i -D style-loader css-loader
2.在webpack.config.js
文件导出的属性当中添加如下的模块处理规则:
modules: {
rules: [
{
test: /\.css$/,
// 匹配所有CSS文件
use: ['style-loader', 'css-loader']
// 顺序是反过来,即先用css-loader处理,再用style-loader处理
}
]
}
3.在需要使用CSS文件的地方通过import 'xxx.css'
导入即可
加载SASS文件
步骤
1.安装:npm i -D sass-loader node-sass
2.加上对应的rule
配置
3.在需要使用SASS文件的地方通过import 'xxx.sass'
导入即可
加载图片文件
步骤
1.安装:npm i -D file-loader
2.加上对应的rule
配置如下:
modules: {
rules: [
{
test: /\.(jpg|jpeg|png|gif|svg)$/,
// 匹配所有图片文件
use: ['file-loader']
}
]
}
3.在需要使用图片文件的地方通过url('xxx.xxx')
导入即可