一、webpack是什么
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
二、 webpack整体架构
以webpack.config.js为主要部分进行划分
entry: 入口，定义整个编译过程的起点
output: 输出，定义整个编译过程的终点
module: 定义模块module的处理方式
plugins：插件，对编译完成后的内容进行二度加工
resolve.alias 定义模块的别名
示例：
//webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin'); //分离CSS和JS文件
const CleanWebpackPlugin = require('clean-webpack-plugin'); //去除build文件中的残余文件
const path = require('path');
const webpack=require('webpack');
let pathsToClean = [
'dist'
]
module.exports = {
entry: { //唯一入口文件
"app.bundle": "./src/app.js",
"contact": "./src/contact.js"
},
devServer: { //配置本地服务器
port: 8686, //端口号
open: true, //设置是否自动打开
hot:true //模块热替换，热更新
//inline:true //实时刷新
},
output: { //输出文件
path: path.resolve(__dirname, 'dist'), //打包后的文件存放的地方
filename: '[name].[hash].js' //打包后输出文件的文件名
},
plugins: [
new HtmlWebpackPlugin({ //new 一个插件的实例，并传入相关的参数
// title:'hello world' //自动添加HTML的标题
template: './src/index.html',
filename: 'index.html',
minify: {
collapseWhitespace: true
},
hash: true,
//excludeChunks代表的不包含
excludeChunks: ['contact']
}),
new HtmlWebpackPlugin({
template: './src/contact.html',
filename: 'contact.html',
minify: {
collapseWhitespace: true
},
hash: true,
//chunks代表的是包含
chunks: ['contact']
}),
new CleanWebpackPlugin(pathsToClean),
new ExtractTextPlugin({
filename:'style.css',
disable:true
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin() //自动刷新实时预览修改后的效果
//new webpack.optimize.UglifyJsPlugin() //压缩JS代码
],
module: {
rules: [
{
test: /\.css$/, //用以匹配loaders所处理文件的拓展名的正则表达式
use: ['style-loader','css-loader','postcss-loader'] //style-loader要配置在css-loader之前
}
]
}
}
entry 对象是用于 webpack 查找启动并构建 bundle。其上下文是入口文件所处的目录的绝对路径的字符串。
注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
三、优势
- webpack 不仅能处理 js, 也能处理 css, 还能处理 html，甚至是图片等各种前端资源；
- 开发便捷，仅仅使用一个配置文件，就能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转 base64等；
- 扩展性强，插件机制完善。
四、使用
1、安装node.js
在安装 Webpack 前，本地需要安装nodejs运行环境，下载地址：node，根据你的系统下载版本。
下载安装包后，点击可执行文件，不断地按下一步，就可以安装成功。
测试安装是否成功，使用 node -v，如果显示版本号则表示安装成功。
2、全局安装webpack
在命令行上输入以下命令：npm install -g webpack，测试是否安装成功输入 webpack -v，如果显示版本号则安装成功。
npm 是 nodejs 管理插件用的工具，install 表示安装，-g 表示全局安装。
3、初始化项目文件
在任意盘符新建一个文件夹，如在D盘创建webpackDemo文件夹；
之后你会看到提示输入一些内容，这不用管，直接全部回车。
创建完成之后，会发现 webpack-test目录下多出了一个名为 package.json 的文件，主要是显示这个项目的名称、版本、作者、协议等信息。
{
"name": "webpack-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.11.0"
}
}
4、在项目中安装webpack
在命令行中输入npm install --save-dev webpack
你会看到正在安装 webpack 的进度，稍等片刻，成功之后，我们再来看看 package.json 这个文件的内容，多了下面这几行：
"devDependencies": {
"webpack": "^3.11.0"
}
同时你也会发现，多了一个目录，叫 node_modules，这就是存放刚才安装的 webpack 库所有要用到的源码文件。
如果你使用的是 npm 5，可能还会在目录中看到一个 package-lock.json 文件。
参考：webpack中文网
