皮蛋很白
皮蛋很白

webpack学习之1.基础配置

前序

nodejs版本：10.15.1
webpack学习版本：4.43.0
在项目中初始化了package.json
学习中，依赖安装全部使用的 -D[–save-dev]

npm init -y

概念

webpack 是一个 JavaScript 应用程序的 静态模块 打包器(module bundler)。

当 webpack 处理应用程序时，它会递归地构建一个 依赖关系图 (dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块，经过预处理、编译、合并、拆分等自定义流程，打包成一个或多个 bundle。

安装

安装webpack 和 webpack-cli（webpack 4+ 需要安装 cli 以执行webpack命令）

npm install -D webpack webpack-cli

现在可以在package.json的scripts中设置脚本，执行webpack命令

// package.json
{
	"scripts": {
		"build":"webpack"
	},
	// ...
}

若想在终端(命令行工具)中直接使用webpack命令，需要使用全局安装(-g)。

执行命令

在项目根目录新建目录src并在其内部创建一个index.js文件。
执行打包命令 npm run build
执行结束，项目中新建了dist目录，webpack将src/index.js打包后的文件main.js放在了dist中。
webpack学习之1.基础配置_第1张图片

关键字

entry 入口，既然要构建依赖关系，就需要知道先从哪些文件（模块）开始递归。默认为 ./src/index.js

output 出口，output配置了打包后的文件输出位置 及 如何命名。默认为 ./dist/main.js

bundles 打包的文件被输出到被称为 bundles 的文件夹。默认为 ./dist

bundle 最终打包后的文件。通常是由多个不同的模块产生，它是已经加载完毕和被编译后的源代码的最终版本。默认为 ./dist/main.js

构建依赖关系

在src目录新建文件module1.js和module2.js，并修改index.js。内容如下：

// src/module1.js
import { message } from './module2'; // js后缀可以省略
export default {
	title: 'I am module1',
	info: message
}

// src/module2.js
export var message =  'this is module2';

// src/index.js
import data from './module1';
console.log(data);

使用ES6模块语法，在module1.js中加载模块module2.js，在index.js中加载模块module1.js。模块语法参考

重新打包 npm run build
webpack学习之1.基础配置_第2张图片
运行打包后的文件 ./dist/main.js 查看效果：

// 可使用node命令在终端查看：node ./dist/main.js
// 或者新建html文件引入main.js，在浏览器开发者工具console中查看。
{ title: 'I am module1', info: 'this is module2' }

这就是webpack最基础的用处，构建依赖关系图，将有依赖关系的文件打包称一个文件。

关键字

module 模块，对于webpack来说，所有的资源/文件(.js、.css、.png)都是module。如 概念 所说，webpack为这些模块，构建依赖关系图，最终打包。上面的3个js文件(index module1 module2)都是模块。

配置文件

可以在项目中创建webpack配置文件，修改webpack的默认配置。参考 配置 webpack官网
执行webpack命令时，可以指定使用的配置文件：

webpack --config xxxxxx.js

webpack默认使用当前目录下的 webpack.config.js
创建webpack.config.js并使用默认配置（下面配置并没有改变什么）

// webpack.config.js
// webpack是导出一个对象的js文件

// webpack配置是标准的 Node.js CommonJS模块
// 可以通过require(...)导入其他文件
// 可以使用常用值 __dirname 等
var path = require('path');

module.exports = {
    entry: {
        main: './src/index.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js' // name为entry定义的入口名:main
    }
}

webpack学习之1.基础配置_第3张图片

Loader 预处理器

关键字

loader webpack 自身只理解 JavaScript，要处理js以外的模块（css less vue 图片等），则需要 loader 按需对文件进行预处理或“加载”。将它们转换为webpack可以处理的有效模块（js文件、Dataurl等）。

示例

比如使用css文件：
在src目录下新建 css/style.css
修改index.js中加载style.css
在dist目录下新建index.html查看效果

// src/css/style.css
h1 {
    color:blue; 
    font-size:16px;
}

// src/index.js
import './css/style.css';
import data from './module1';
// 删除 console.log(data)
var div = document.createElement('div');
div.innerHTML= `
${data.title}
${data.info}
`;
document.body.appendChild(div);

// dist/index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>I am index.html</h1>
        <script src="./main.js"></script>
    </body>
</html>

webpack学习之1.基础配置_第4张图片

此时执行打包命令会报错：

You may need an appropriate loader to handle this file type, 
currently no loaders are configured to process this file.
您可能需要适当的 loader 来处理此文件类型，目前没有配置 loader 来处理此文件。

添加loader

安装 css-loader style-loader
css-loader 用于识别 模块方式 加载的css，将其转化为js代码，但并不负责应用到页面中。
style-loader 通过js创建一个