关于webpack
webpack是一个针对 JavaScript 的打包工具 ===》模块打包器(module bundler)，webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能，是高度可配置的。
深入学习可看官方文档
webpack与Grunt/Gulp的对比
webpack是一种模块化的解决方案，而Gulp/Grunt是一种能够优化前端的开发流程的工具。
webpack的原理：全局角度掌控和把握整个项目，通过一个给定的主文件（如：main.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
Gulp/Grunt的原理：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。但并没有从系统(或全局)的角度考虑如何完成任务的输入和输出。
webpack安装
npm install -g webpack //全局安装
npm install --save-dev webpack //安装到项目目录下
正式使用webpack
1.初始化、安装webpack
npm init -y //初始化项目 ===》生成package.json
npm install --save-dev webpack //安装webpack到项目目录下
( //安装的包的名称及版本号就会存在package.json的devDependencies这个里面 )
2.创建项目结构
myProject
|-- dist //webpack打包放置文件的目录
|-- bundle.js // 打包后输出的文件
|-- node_module // 项目依赖的第三方模块
|-- package.json
|-- .babelrc //处理高级JS语法
|-- webpack.config.js // webpack配置文件
|-- src
|-- views // 页面组件目录
|-- main.js // 入口文件
|-- index.html // 启动页面
3.webpack配置项
const path = require('path'); // 导入 Node中的Path模块 ===》因为 webpack 是基于Node构建的，所以可以使用 Node 语法或者 引用Node模块
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 这个包是帮助我们在开发阶段，在内存中自动生成HTML页面，并把 bundle.js 自动注入到 生成的页面中
module.exports = {
entry: path.join(__dirname, './src/main.js'), // 指定打包的JS入口文件
output: { // 打包好的输出配置项
path: path.join(__dirname, './dist'), // 设置输出路径
filename: 'bundle.js' // 设置输出的文件名
},
module: { // 配置所有第三方模块的处理模块
rules: [ // 是 第三方文件的匹配规则，是用来匹配文件后缀名的，同时指定匹配到的文件，交给 哪种类型的loader 去处理
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },// 处理普通样式的loader
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 处理sass样式的loader
{ test: /\.(jpg|jpeg|png|gif|bmp)$/, use: 'url-loader' }, // 处理样式中图片URL路径的loader
{ test: /\.(ttf|eot|woff|woff2|svg)$/, use: 'url-loader' }, // 处理 字体文件路径 的loader
// { test: /\.(png|jpg|gif|bmp)$/, use: 'url-loader?limit=7631&name=[name].[ext]' } // 处理 图片路径的loader 注意：如果某种文件类型，只有一个 loader ，则可以直接 把 loader 名称以字符串形式，交给 use 去使用
// 在 url-loader 中，有个 limit参数，指定了 转为base64格式最大值 只有小于给定值的图片才会被转码为 base64 注意 limit 的单位 是 Byte（字节） 如果图片大小正好等于给定值，不会被转码
{ test: /\.vue$/, use: 'vue-loader' } // vue-loader
]
}
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'), // 这是指定要生成的模板页面路径
filename: 'index.html' // 指定生成的内存中的页面名称
}),
]
};
注意： __dirname 是node.js中的一个全局变量，指向的是项目根目录。
module下use的loader 都需要安装 如：cnpm i style-loader css-loader --save-dev
可以修改 entry 对象，指定任意数量的入口文件和输出文件.
entry: {
app: ['./main.js', './events.js''],
},
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].bundle.js',
},
如果不想把所有打包在一个文件中，可以选择将多个文件打包在多个文件中。上述例子会输出两个文件: dist/main.bundle.js和 dist/events.bundle.js
4.实现webpack的实时打包构建
npm i webpack-dev-server --save-dev //安装到开发依赖
实现自动打开浏览器、热更新和配置浏览器的默认端口号
方式1：
修改package.json的script节点如下：
"dev": "webpack-dev-server --hot --port 4321 --open"
//open表示自动打开浏览器，port 4321表示打开的端口号为4321，hot表示启用浏览器热更新
方式2：
1.在头部引入webpack模块：
const webpack = require('webpack');
2.修改webpack.config.js文件，新增devServer节点如下：
devServer: {
open: true, // 默认打开浏览器
contentBase: 'src', // 指定默认托管的目录为 src 目录
port: 4321, // 指定打开的端口号
hot: true // 启用热更新
},
3.在plugins节点下新增：
new webpack.HotModuleReplacementPlugin(), // 创建一个 热更新的 插件，配合 hot 属性一起使用
5.使用babel处理高级JS语法
cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev //安装babel的相关loader包
cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev //安装babel转换的语法
在webpack.config.js中添加相关loader模块，其中需要注意的是，一定要把node_modules文件夹添加到排除项：
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
在项目根目录中添加.babelrc文件，并修改这个配置文件如下：
{
"presets":["es2015", "stage-0"],
"plugins":["transform-runtime"]
}
//注意：语法插件babel-preset-es2015可以更新为babel-preset-env，它包含了所有的ES相关的语法；
6.项目打包
webpack //若未安装webpack-dev-server执行此时命令
npm run dev //已安装webpack-dev-server
7.优化插件
OccurenceOrderPlugin :为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID
UglifyJsPlugin：压缩JS代码；
ExtractTextPlugin：分离CSS和JS文件
npm install --save-dev extract-text-webpack-plugin
在webpack.config.js中配置
const ExtractTextPlugin = require('extract-text-webpack-plugin');
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin("style.css")
]
最终
开发服务器会运行在 localhost:4321(打开浏览器访问该地址就能看到页面)
