上一篇《什么是构建？webpack打包思想》
webpack是在node环境里跑的，所以先搭建构建环境。node的安装很简单，去官网下载node 安装包直接安装即可，就跟平常软件一样。npm是node自带的包管理器，对npm不熟悉建议先看：
安装完node后，我们到D盘下，打开cmd，执行下面的命令：
1 npm install webpack -g
// g全局安装
2 mkdir movetest//创建项目目录 movetest(随便乱起的)
3 cd movetest
4 npm init// 生成package.json
5 npm install webpack@3//@3指定了3x版本
整个项目目录文件如下：
项目结构
dist --webpack打包后的生成目录
src --项目代码，里面包含index.html 和main.js
编辑webpack.config.js:
// webpack 是node环境跑的，模块化支持CommonJS规范，不能写成ES6的形式
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'), // path node的模块，__dirname 指当前文件的地址，resolve方法合并地址
filename: 'my-first-webpack.bundle.js'
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
entry -- 告诉webpack解析入口，webpack只懂js
output --告诉webpack构建后，将生成的文件放到哪里
HtmlWebpackPlugin -- 因为webpack只懂js，对其他文件的操作需要插件或者loader(后面介绍)来完成。这个插件告诉webpack，将打包后的文件引入到index.html中。而我们需要安装这个插件，在cmd命令界面中执行npm install html-webpack-plugin
然后index.html 和 main.js 分别：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
alert('my-first-webpack-test') // main.js
然后我们到cmd命令界面执行：webpack --config webpack.config.js，然后我们看到webpack构建信息，
webpack帮我们生成了两个文件my-first-webpack.bundle.js 以及index.html， 其实就是我们配置文件webpack.config.js 中定义的 filename
webpack构建信息
同时打开dist目录
dist目录
查看index.html代码：
index.html
打开index.html
有趣的是，my-first-webpack.bundle.js 代码就比较复杂了。这里不贴图了，但我们知道我们打包成功了。
其实webpack的构建过程：
根据入口main.js，分析整个项目的引入了哪些js文件或者css文件或者font资源文件，然后打包构建，输出到我们配置的目录下，并引入到index.html中。那么我们就可以在main.js中引入css文件和其他js文件
在src下添加reset.css 和 other.js
/*reset.css*/
body{
color: red;
font-size: 30px;
}
//other.js
document.write('如果引入成功，字体大小是30px，并且是红色，能看到这段文字')
修改main.js
// 引入两个文件
require('./reset.css')
require('./other.js')
同时，我们需要修改一下webpack.config.js，但是webpack只懂js,对于非js文件，我们要引入对应的处理loader工具，我们这次要引入的是css-loader和style-loader来处理我们的css代码
修改webpack.config.js
当然，我们也要npm install css-loader style-loader。配置文件中，test是正则匹配，告诉webpack，只要你遇到是css文件，交由css-loader处理， 处理完后再由style-loader处理成style标签样式引入，使其生效。OK，让我们重新打包一下，命令行执行 ： webpack --config webpack.config.js
再一次打包成功.png
打开dist/index.html
看到引入文件成功
这时你可能懵逼了，为什么对html文件就用plugin，对css就用loader？其实两者的区别是：
loader 用于对模块的源代码进行转换，它参与webpack构建中，帮助对非JS文件的处理，或者对于那些用ES6、ES7(新js规范)写的js文件处理，处理成webpack可识别的模块，再由webpack打包处理；而plugin是webpack构建周期执行的，比如webpack构建打包完成完成后，调用html-webpack-plugin将生成的bundle.js 注入到index.html。
一句话：loader是帮助webpack处理它不能处理的文件，变成webpack可识别的js模块，而对应plugin这是webpack构建周期中的钩子函数，比如：
开始构建起，做点什么，
loader处理css文件，做点什么
loader处理font文件，做点什么
做点什么构建完成后，做点什么
由plugin来担任
OK，我们已经明白了webpack基本概念与处理方式，接下来我们从vue-cli工具生成的工程来学习webpack的配置。
下一篇 《从vue-cli生成工程学webpack配置》
系列文章:
《什么是构建？ webpack打包思想？》
《webpack基础使用》
《从vue-cli学webpack配置1——针对webpack2》
《从vue-cli学webpack配置2——针对webpack3》
《webpack 、mainfest 、runtime 、缓存与CommonsChunkPlugin》
《webpack打包慢的解决方案》
网友评论