webpack入门介绍及简单配置
Posted 诗渊
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack入门介绍及简单配置相关的知识，希望对你有一定的参考价值。
webpack在当前前端工程师常用的一个工程化打包工具，官方对webpack的介绍是：webpack本质上 是一个现代 javascript 应用程序的静态模块打包器(static module bundler)。在 webpack 处理应用程序时，它会在内部创建一个依赖图(dependency graph)，用于映射到项目需要的每个模块，然后将所有这些依赖生成到一个或多个bundle。
官网地址：https://webpack.js.org/，（也将其切换成中文）。
webpack 是一个 高度可配置的打包工具，通过配置，能够很好的满足需求。在学习如果配置webpack之前，需要先了解一个webpack的四个核心概念。
四大核心概念：
-
入口(entry)
-
输出(output)
-
loader
-
插件(plugins)
入口(entry)
打包的入口：所有的依赖模块都可以通过这个入口直接或间接地找到，也就是构建webpack内部依赖的起点；
单个或多个：（1）多页面应用，存在多个入口，（2）单页面应用可能也存在多个入口，打包入口不代表文件执行的入口，例如我们可以将业务代码和框架代码分别打包。
基本用法：
在webpack.config.js中配置
module.exports =
entry: './path/to/my/entry/file.js'
;
其实上述是下面这种对象语法形式的简写：
module.exports =
entry:
main: './path/to/my/entry/file.js'
;
对象语法形式看起来繁琐一点，但是可以定义每一个入口的key，每一个key相当于一个chunk，这有利于扩展，例如如果是一个多页面应用，有多个入口的话，直接在上述的对象语法形式上扩展即可，：
module.exports =
entry:
main: './path/to/my/entry/file.js',
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
;
我们也可以往一个入口中传入一个数组，即相当于把数组中的多个文件打包到一个chunk中：
module.exports =
entry:
main: ['file1.js','file2.js']
;
输出(output)
output可定值打包后文件输出的文件名以及输出路径，所以output为一个对象，包括两点：
- filename ：用于表示输出文件的文件名，
- path：目标输出目录 的绝对路径。
对于单个入口文件，output可以简单配置如下：
module.exports =
output:
filename: 'bundle.js',
path: '/path/to/my/output'
;
以上配置会将打包后的 bundle.js 文件输出到 /path/to/my/output 目录中。
如果有多个入口的话，可以采用占位符来确保每个文件具有唯一的名称：
module.exports =
entry:
main: './path/to/my/entry/file.js',
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
,
output:
filename: '[name].js',
path: __dirname + '/dist'
;
以上配置会在 /dist 目录下分别生成：main.js、pageOne.js、pageTwo.js、pageThree.js。
loader
loader 用于对模块的源代码以及文件进行转换，转换成浏览器可直接执行的模块。
常用loader：
- 编译相关：
babel-loader、ts-loader - 样式相关：
style-loader、css-loader、less-loader、postcss-loader - 文件相关：
file-loader、url-loader
由于loader解析模块时， 将从模块路径（通常将模块路径认为是 npm install, node_modules）解析，因此我们使用前需要先安装相对应的 loader，以css-loader为例：
npm install --save-dev style-loader
npm install --save-dev css-loader
使用 loader 的方式有三种：配置、内联和CLI，常用的是通过配置来使用：
module:
rules: [
test: /\\.css$/,
use: [ loader: 'style-loader' , loader: 'css-loader' ]
]
（插件）Plugins
插件的功能很强大，可以用于解决 loader 无法实现的其他事，例如：
- 参与打包整个过程
- 打包优化和压缩
- 配置编译时的变量
插件的使用方法与loader类似，也需要先安装，此处以html-webpack-plugin为例：
npm install --save-dev html-webpack-plugin
然后在webpack.config.js中配置：
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports =
//插件
plugins: [
new HtmlWebpackPlugin(
title: 'webpack demo1',
template: path.resolve(TEMPLATES_PATH, 'template.html'),
chunks: ['app'],
)
]
先通过require将插件引入进来，然后，在配置对象中新增一个plugins属性，plugins的值是一个数组，数组中可以通过new 方式使用插件，数组中可以有多个插件，且对每一个插件分别定义options。
html-webpack-plugin是html模板插件，可以根据你的提供的html模板生成你需要的html文件，因此我在项目中定义了一个templates文件夹用于放html模板，template.html模板文件内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<h1>hello webpack!</h1>
</body>
</html>
最后会在build文件夹下生成一个index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack demo1</title>
</head>
<body>
<h1>hello webpack!</h1>
<script type="text/javascript" src="app.js"></script></body>
</html>
可以发现，该插件会自动将你chunks中的js文件生成到html文件的<script> 标签内，如果你有任何CSS assets 在webpack的输出中（例如， 利用ExtractTextPlugin提取CSS）， 那么这些将被包含在HTML head中的<link>标签内。
其他插件的功能及使用方法可以在此处查看：https://webpack.docschina.org/plugins/html-webpack-plugin/
以上是关于webpack入门介绍及简单配置的主要内容，如果未能解决你的问题，请参考以下文章