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')导入即可

Webpack 基本使用