webpack学习之路—入门篇
1、什么是webpack?
首先是webpack对自己阐述：本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
本人的理解：webpack说白了就是一款静态资源打包工具，运用模块化的理念对程序进行打包编译，并且这样的打包是可以高度自定义，用户可以通过配置在打包的过程中对项目资源作各种处理，其目的是更有利于浏览器运行处理。
2、webpack的安装
Wabpack的安装部分往往容易被人忽略但其实这也是相当重要的一部分。
首先webpack有全局安装也有局部安装
全局安装
npm i webpack -g
全局安装会把webpack安装在某个全局环境下，全局安装在命令行中的任何地方都是可以直接调用的。
局部安装
npm i webpack
npm i webpack --save
npm i webpack --save-dev
–save：将保存配置信息到pacjage.json的dependencies节点中。
–save-dev：将保存配置信息到pacjage.json的devDependencies节点中。
dependencies：运行时的依赖，发布后，即生产环境下还需要用的模块
devDependencies：开发时的依赖。里面的模块是开发时用的，发布时用不到它。
webpack安装注意事项
由于webpack现版本已经更新到webpack4了，当安装最新版本时有可能会出现一些问题
在webpack3中，webpack本身和它的CLI是在同一个包中的，但是在第4版中，他们已经将两者分开来了，这样会导致原来的命令用不了的情况，而这时命令行会提示你安装webpack-cli，安装上webpack-cli就行了。
提示如下：
3、webpack的核心
入口（entry）: entry会告诉webpack,它应该从哪里入手处理你的项目，入口文件里应当包含你项目的各种依赖关系，只有这样webpack才能顺藤摸瓜分析清楚你项目的结构，当然入口文件可以是一个也可以是多个，只有一个入口文件或者是使用数组传入几个入口文件，在没有使用一些抽离插件的情况下，webpack会一股脑地把所有的依赖文件（包括css）打包成一个js文件，而使用对象传入多入口文件的情况下webpack则会根据入口文件数量打包出多个js文件。
入口配置项:
| 类型 | 例子 | 含义 |
|---|---|---|
| String | "./app/entry.js" |
入口模块的文件路径，可以是相对路径 |
| Array | ['./app/entry1.js','./app/entry2.js'] |
入口模块的文件路径，可以是相对路径 |
| Object | {a:'./app/entry1.js',b:'./app/entry2.js'} |
配置多个入口，每个入口生成一个chunk |
输出（output）: 输出指的就是webpack打包出来的文件了，在输出里可以配置文件的命名以及输出路径
filename可选变量：
| 类型 | 含义 |
|---|---|
| id | Chunk的唯一标识，从0开始 |
| name | `Chunk的名称 |
| hash | Chunk的唯一标识的hash值 |
| chunkhash | Chunk内容的hash值 |
加载器（loader）:webpack本身只会处理js文件，而一个项目中往往会有各种不同类型的文件，这些不同类型的文件想要让webpack来识别就必须使用loader，并配置loader，以此来告诉weback通过怎样的规则去识别处理非js文件。当然了，js文件也可以通过loader来处理，webpack社区也会有一些处理js的插件，如babel-loader，它可以将js的一些ES6的语法转换成大多数浏览器可以识别运行的语法。
插件（plugins）：webpack之所以强大，很大一部分原因就是它拥有数量极多功能极丰富的插件，通过这些插件webpack几乎无所不能。
4、实例配置
前面说了这么多，来个实际操作吧
webpack.config.js.
// webpack.config.js
var webpack = require('webpack')
path = require('path')
ExtractTextPlugin = require("extract-text-webpack-plugin")
HtmlWebpackPlugin = require('html-webpack-plugin')
CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
mode: 'development',
devtool: 'inline-source-map',
context: __dirname,
// 入口文件
entry: {
app: './src/js/index.js'
},
// 输出
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name]-[hash].js',
},
// 模块
module: {
rules: [
// 处理图片文件loader配置
{
test: /.(jpg|png|gif|svg)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'images/[name].[hash:7].[ext]',
publicPath: '../',
outputPath: '/'
}
}
]
},
// CSS文件处理，使用了抽离插件
{
test: /\.css$/,
use: ExtractTextPlugin.extract(['css-loader', 'postcss-loader'])
},
]
},
plugins: [
// 生成html文件，并把打包出来的资源插入html,使用预先编写好的index.html作为模板
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html'
}),
//抽离出来的CSS输出配置
new ExtractTextPlugin('css/[name].[hash:8].css'),
//对于字体文件，本人使用直接copy过去的插件
new CopyWebpackPlugin([
{
from: './src/iconfont',
to: 'iconfont'
}
])
],
resolve: {
alias: {
'old-module': 'new-module'
}
},
// devServer配置
devServer: {
https: false,
host: 'localhost',
port: 8080,
contentBase: path.resolve(__dirname, ''),
stats: "errors-only",
index: './src/index.html',
open: true,
openPage: './src/index.html',
overlay: {
errors: true,
warnings: true
},
}
}
源文件结构
生成dist结构
