大家好，又见面了，我是全栈君。
前言
“模块化”可以说是现在前端最流行的三个字，而webpack就是一款非常非常流行的模块打包工具，它可以分析模块之间的依赖关系，并将这些模块根据指定规则打包成浏览器能识别的静态资源。
作为一个前端，学习并使用webpack已经是刻不容缓的事情，现在，就让我们开始webpack之旅吧。
安装webpack
首先新建一个空的文件夹，使用npm init命令初始化。
初始化的目的是为了生成package.json文件，这是一个npm说明文件，里面包含了当前项目的依赖模块，自定义的脚本任务等信息。
代码语言：shell复制//新建webpack-demo的文件夹
mkdir webpack-demo
//进入该文件夹
cd webpack-demo
// 初始化
npm init
复制代码输入npm init命令后，终端会要求你填写一些信息，如果你不准备在npm中发布你的模块，直接一路回车完成初始化就行。
初始化完成后，你可以看到已经生成了一个package.json文件，你也可以在这个文件里手动修改初始化的时候终端让你输入的信息。
接下来就要安装webpack，你可以全局安装webpack，也可以在项目目录下安装webpack，官方不支持全局安装，因为那样会使不同webpack版本的项目搭建失败。
代码语言：shell复制// 全局安装
npm install -g webpack
// 安装到指定项目目录
npm install --save-dev webpack
复制代码安装完成后我们发现项目目录中多了一个node_modules文件夹，我们可以查看下webpack的版本。
代码语言：shell复制// 查看全局安装的webpack版本
webpack -v
// 查看非全局安装的webpack版本
cd node_modules/.bin
webpack -v
复制代码接下来我们开始用webpack来打包第一个文件。
打包第一个文件
用编辑器打开项目，新建一个hello.js文件。
使用webpack打包hello.js文件，同样，不是全局安装webpack的小伙伴们这时得注意路径问题了。
代码语言：shell复制// 全局安装webpack的情况
webpack hello.js bundle.js
// 非全局安装webpack的情况
cd node_modules/.bin
webpack [完整路径]/hello.js [完整路径]/bundle.js
复制代码如图所示，打包完成后，webpack会告诉我们一些信息，比如打包时间、打包后文件的大小等。
这时我们发现，如果不是全局安装webpack，执行webpack打包命令将变得非常麻烦，其实我们可以配合npm的脚本来更快捷的执行打包任务。
修改package.json文件，在scripts属性中新增执行webpack打包的脚本，比如build，执行npm run build hello.js bundle.js，发现打包成功。
打包好之后我们可以通过live-server启动一个本地服务。
代码语言：shell复制// 全局安装live-server
$ npm install -g live-server
复制代码安装好之后执行live-server，会发现它已经帮我们打开了一个浏览器页面，并且当你修改本地任何文件时，浏览器都会自动更新。
现在我们已经成功打包了一个js文件，接下来让我们试着打包一个css文件。
新建一个index.html文件和style.css文件，在样式文件中添加一些样式，并在hello.js文件里用require的方式将其引入（require是CommonJS的语法，webpack支持CommonJS/AMD/CMD）。
这时如果我们直接打包会发现报错了，错误提示我们需要一个合适的loader来处理这种css文件类型。因此我们要先安装两个loader，css-loader和style-loader，前者是使webpack支持css文件，后者则会将样式通过style标签插入到html中。
代码语言：shell复制npm install css-loader style-loader --save-dev
复制代码安装完成后，我们还需要在文件引用的地方指定相应的loader。
代码语言：shell复制require('style-loader!css-loader!./style.css')
复制代码再次执行打包命令发现打包成功，在index.html里引入打包好的bundle.js，打开index.html页面发现样式已经成功显示。
代码语言：shell复制// 文件更新的时候自动打包
webpack {entry file} {bundled file} --watch
// 显示文件打包的过程
webpack {entry file} {bundled file} --progress
// 显示所有模块
webpack {entry file} {bundled file} --display-modules
// 显示打包模块的原因
webpack {entry file} {bundled file} --display-reasons
复制代码webpack配置文件
webpack有非常多的功能，因此我们需要有一份好的配置文件来放置所有的打包配置信息。
如图所示，构建一份新的目录，src文件夹用来放打包前的资源，dist文件夹用来放打包后的资源，webpack.config.js用来配置打包信息，如果配置文件不叫webpack.config.js，则打包的时候需要用–config来重新指定，比如
代码语言：shell复制webpack --config webpack.config.a.js
复制代码入口（Entry）和出口（Output）
入口（enrty），简单来说，就是告诉webpack从哪里开始。我们可以通过在webpack配置中配置entry属性，来指定一个入口起点（或多个入口起点）。webpack会根据这个入口，来获取模块之间的依赖关系并根据依赖关系来知道需要绑定些什么。
出口（output），用来告诉webpack打包后文件做何处理及存放的位置。如上图所示，output.filename 指定了打包后的文件的名字，output.path则指定了文件存放的位置。
关于path获取到的绝对路径，我们可以新建一个js文件输入该路径，并用node运行这个js文件。
入口（Entry）
- 单个入口写法
entry属性的单个入口语法，是下面这种的简写方式：
- 对象语法
出口（Output）
- 单个入口起点
- 多个入口起点
如果在打包生成的文件名后面加上不确定的chunkhash，这时候我们需要借助webpack的插件html-webpack-plugin来自动生成项目中的html页面。
代码语言：shell复制// 通过npm安装
$ npm install html-webpack-plugin --save-dev
复制代码Loader
loader用于对模块的源代码进行转换。它可以将不同语言的文件转换为JavaScript，或将图片转换为dataURL等。
- 举个栗子babel
安装babel：
代码语言：shell复制$ npm install --save-dev babel-loader babel-core babel-preset-latest
复制代码指示webpack对每个.js结尾的文件使用babel-loader进行转换：
代码语言：shell复制module: {
loaders: [
{
test: /.js$/,
loader: 'babel-loader',
include: path.resolve(__dirname, 'src'),
exclude: path.resolve(__dirname, 'node_modules'),
query: {
presets: ['latest']
}
}
]
}
复制代码- 其他文件类型
loaders: [
{
test: /.js$/,
loader: 'babel-loader',
include: path.resolve(__dirname, 'src'),
exclude: path.resolve(__dirname, 'node_modules'),
query: {
presets: ['latest']
}
},
{
test: /.css$/,
loader: 'style-loader!css-loader'
},
{
test: /.less$/,
loader: 'style-loader!css-loader!less-loader'
},
{
test: /.(png|jpg|gif|svg)$/i,
loaders: [
'url-loader?limit=10000&name=assets/[name]-[hash:5].[ext]',
'image-webpack-loader'
]
}
]
复制代码发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/107658.html原文链接：https://javaforall.cn
