webpack是干什么？
我们每次开发的时候，都需要在页面的head中加载各种js资源，当你加载了jquery和vue全家桶一套以后，你会发现你的页面已经变得非常的臃肿。更别说你还需要要引用一个你自己的index.js文件。
如果你之前接触过sea.js或者require.js的话，你就可以很容易的理解（你没接触过也无所谓）他们的核心思想就是，把所有需要引入的js，都通过一个公用的js文件去加载。并且在这个js文件中赋予一些逻辑性。
所以最后的结果就是，你最后生成的html文件中只会引用一个js文件和一个css文件，这样不但代码变整洁了，页面打开速度也获得了巨大的提升，这就是所谓的前端优化。
webpack就是一个为了解决这个问题而诞生的工具。当然，它绝对没有这么简单，还记得es6吗，还记得less，sass这种高科技语法吗，你直接在html中使用是不行的，因为低端浏览器并不能解析这类语法。但是通过webpack，我们可以集成一个解析器babel来帮助我们实现对这类语法的解析，让低端浏览器实现全兼容。怎么样，webpack是不是很强大？现在让我们更加详细讲解它的奥秘。
如何安装
webpack是基于nodejs语言的，你不会nodejs也没用关系，因为他只有几个简单的命令。
先从nodejs的官方网站下载nodejs，安装完毕以后，打开doc窗口输入：
npm -g i webpack@3.8.1
安装完毕查看一下版本号。
如果能正确显示版本号，说明安装成功！
创建项目
创建一个你想要作为项目的文件夹，然后在这个文件夹上shift+右键在弹出的菜单中选择打开powershell，这个东西是原来那个doc窗口的加强版，功能跟小黑窗一模一样。然后输入：
npm init
你会看到很多需要你输入的东西，不用管，一路回车。
这一步的主要目的是创建一个基于npm的项目，以后，我们安装任何插件，只需要配置这个项目中的package.json文件即可。如果你之前没有使用过npm，你到这一步的时候可能会有点蒙，不要着急，我们继续往下，龙哥的文章向来就是即插即用，就算你不会安装，你把我给你的例子一拷贝，你也可以实现webpack的各种操作，原理什么的你在实战中逐渐体会也完全没问题。
接着你用编辑软件打开刚才输入命令的那个文件夹，你会发现里面有一个package.json文件，改成我这个样子：
{
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-runtime": "^6.26.0",
"autoprefixer": "^7.2.3",
"css-loader": "^0.28.7",
"style-loader": "^0.21.0",
"less-loader": "^4.1.0",
"url-loader": "^0.6.2",
"file-loader": "^1.1.6",
"html-webpack-plugin": "^2.30.1",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.7",
"webpack-require-http": "^0.4.3",
"extract-text-webpack-plugin": "^3.0.2"
},
"name": "demo",
"version": "1.0.0",
"main": "webpack.js",
"dependencies": {
"bootstrap": "^3.3.7",
"html-loader": "^0.5.5",
"jquery": "^2.1.1",
"less": "^3.0.4",
"less-loader": "^4.1.0",
"style-loader": "^0.21.0",
"webpack-dev-server": "^2.11.5"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"dev": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"description": "",
"babel": {
"presets": [
"es2015",
"react"
]
}
}
刚才我们说了，这个文件主要的作用是，npm在你这个项目中，使用哪些插件。你仔细看我这个文件，里面已经包含了es6解析器，css和less，url图片地址等等各种解析器，甚至规定了webpack的版本。
然后输入一遍
npm install
这一步操作的目的是把配置文件中的内容安装到本地。
webpack.config.js的配置
接着在package.json的同级目录下创建一个webpack.config.js，这个文件的目的主要是为了配置我们的webpack。
像我这样写：
// 引入webpack
const webpack = require('webpack')
// 引入html生成插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入css压缩插件
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
// 入口文件，指向app.js
entry: {
index: './src/js/index.js',
},
// 出口文件
output: {
// 项目的路径
path: __dirname + '/dist',
// 增加随机数防止缓存
//filename: 'js/[name].[hash:5].js',
// 输出的文件的路径
filename: 'js/[name].js',
// 为使用热启动后产生的日志文件设定输入路径
hotUpdateChunkFilename: 'hot/hot-update.js',
hotUpdateMainFilename: 'hot/hot-update.json'
},
externals:[
// 让webpack可以加载外部http资源 例如螳螂
require('webpack-require-http')
],
// webpack-dev-server 环境
devServer: {
contentBase: './dist',
hot: true
},
module: {
// loader放在rules这个数组里面
rules: [
{
//把es6转换成es5
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.html$/,
use: {
loader: 'html-loader'
}
},
{
//识别图片
test: /\.(png|jpg|gif)$/,
loader: 'url-loader',
options: {
limit: 4096,
name: 'image/[name].[ext]'
}
},
{
//压缩css
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
publicPath: "../",
use: [
{
loader: 'css-loader',
options:{
minimize: true //css压缩
}
}
]
})
},
{
//识别字体文件
test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader?name=./fonts/[name].[ext]'
},
]
},
// 将插件添加到webpack中
plugins: [
// 开启多页应用 生成html文件
new HtmlWebpackPlugin({
//模板文件是哪个
template: './src/index.html',
//选择注入哪个文件
chunks: ['index'],
//是否添加hash随机数防止缓存
//hash: true,
//开启html压缩
minify:{
removeComments:true, //移除HTML中的注释
collapseWhitespace:true//压缩为一行
},
// manual根据chunks的位置手动排序
chunksSortMode: "manual"
}),
// 防止webpack一直弹出警告 加载HMR需要的两个插件
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
// 解决加载jquery后 jquery不能获得$符控制权的问题
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new ExtractTextPlugin("css/styles.css"),
]
}
你现在肯定有点懵，这是干什么呢？？上来一顿配置，我都不知道干什么呢。
不用着急，我们先把开发环境配置好，当我们开始使用的时候，我们会逐个讲解这些配置用到的地方！
到了这一步，你的项目文件夹下面，应该有node_modules文件夹，一个package.json文件和一个webpack.config.js文件，好的，然后你再创建两个文件夹，一个叫src，一个叫dist。
全部完成以后是这样的：
到了这一步，webpack的安装和配置就完成了，接下来我们该进入开发环节了。
如何使用
我们新建的两个目录：dist为生成生产环境，src为开发环境
你所有的操作全部在src中完成，我们的最终目的是：
通过小黑窗口中输入一遍webpack命令，把src中的文件压缩优化成为src文件夹中的最终形态。也就说，我们开发的时候，只需要修改src目录中的内容，正式上线的时候，只需要把dist中的文件通过ftp传到服务器就可以了。
这里龙哥需要给你讲一下原理，现在webpack的教程有很多，但是我相信大部分人到了，入口文件那块就差不多放弃了。因为webpack它本身是基于nodejs的，nodejs顾名思义，只能编译js...
所以，你放在项目里面的html啊，css啊甚至图片啊。nodejs一概不承认，或者你可以理解为，它不认识这是什么。
这里我们就需要编写一个文件，让我们把项目中的所有资源都利用起来，并且告知webpack这些资源都是什么，这个文件，就叫做入口文件。这个文件的配置你可以灵活配置，我自己是选择放在src中的js文件夹中，因为这样让它们看起来更加规范一些。
如果你仔细阅读上面的webpack.config.js文件的话，你会发现，里面的entry项就是入口文件的位置。
然后我们来看看这个文件中都写了一些什么东西：
//引入jquery 必须为此写法让插件和全局都获得jquery支持
import $ from 'jquery'
window.$ = $
window.jQuery = $
export default $
//引用bootstrap
// import 'bootstrap';
// import 'bootstrap/dist/css/bootstrap.css';
//加载自己的js
import '../js/time/flipclock.js';
//引用html加载页面上的src资源
import '../index.html';
//引入自己的css
import '../css/index.css';
import '../js/time/flipclock.css';
你会发现，页面，页面上的css和js都是在这个js文件中被引用的。
此时我的html页面上什么也没有引用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的标题</title>
</head>
<body>
<article>
我的内容
</article>
</body>
</html>
你可能会好奇，如果我的html中不引入，那么最后打包完了以后，这个js文件会被加载吗？
答案是会的，webpack会自动加载配置文件中的入口文件到你的html中。
这里我忽然想起了一个情况：那就是，有一些时候，我们需要引入外网的资源，这些资源是不能被打包到项目中的，比如一些crm系统，或者一些站长统计的js。
我们需要使用这个方法：
//引入jquery 必须为此写法让插件和全局都获得jquery支持
import $ from 'jquery'
window.$ = $
window.jQuery = $
export default $
//引用bootstrap
// import 'bootstrap';
// import 'bootstrap/dist/css/bootstrap.css';
//加载自己的js
import '../js/time/flipclock.js';
//引用html加载页面上的src资源
import '../index.html';
//加载外网的js
Promise.all([
require('http://talk2.bjmantis.net/chat/js/dist/mantis.min.js?123456'),
require('http://talk2.bjmantis.net/chat/js/dist/register_form.min.js')
]).then(function() {
});
//引入自己的css
import '../css/index.css';
import '../js/time/flipclock.css';
然后让我们来完成这个页面，我添加了一些内容，然后把图片也引入了，当我们感觉编辑的差不多了的时候，在小黑窗中输入：
npm run dev
你会看到这个画面，然后打开窗口中提示的地址就能看到我们的页面。
打包发布项目
当我们感觉页面已经没问题可以打包上线的时候，还是在这个目录上，输入：
webpack
是的，仅仅就需要这么一个单词而已。
然后打开dist目录，你会发现所有的文件webpack已经帮我们打包好了，然后我们把dist目录里面的文件上传到ftp就行了。
webpack常见问题解答
通过上面的学习，我们已经可以通过webpack压缩优化我们的项目了。
但是我想告诉你的是webpack能做的事情远不止如此，我们经过学习，知道了webpack其实是一个打包工具，它把我们项目中用到的插件都合并成了一个js，还可以优化css和img图像。那么，我们常用的插件是哪些？它们又发挥了什么作用？打包出来的页面能否不只是一个spa而是多个页面呢？
常用插件说明（package.json）
package.json中有一项是devDependencies，这一项表示npm包中引用了哪些编译包
| 插件名称 | 版本号 | 作用 |
|---|---|---|
| babel-core | 6.26.0 | 编译es6 |
| babel-loader | 7.1.2 | 编译es6 |
| babel-plugin-transform-runtime | 6.23.0 | 编译es6 |
| babel-preset-env | 1.6.1 | 编译es6 |
| babel-preset-es2015 | 6.24.1 | 编译es6 |
| babel-preset-stage-0 | 6.24.1 | 编译es6 |
| babel-runtime | 6.26.0 | 编译es6 |
| autoprefixer | 7.2.3 | css3自动添加前缀 |
| css-loader | 0.28.7 | 编译css样式表 |
| style-loader | 0.21.0 | 编译css样式表 |
| less-loader | 4.1.0 | 编译less样式表 |
| url-loader | 0.6.2 | 编译图像，能转化为base64就转化，不能转化就通过file插入到页面中 |
| file-loader | 1.1.6 | 编译图像，能转化为base64就转化，不能转化就通过file插入到页面中 |
| html-webpack-plugin | 2.30.1 | 生成html 否则你的项目最后只会有一个压缩的js |
| webpack | 3.8.1 | webpack |
| webpack-dev-server | 2.9.7 | 本地环境启动器 |
| webpack-parallel-uglify-plugin | 1.1.0 | js压缩工具 |
| webpack-require-http | 0.4.3 | 加载外部文件 |
| extract-text-webpack-plugin | 3.0.2" | 提取css为一个文件 |
webpack可否通过多个入口文件打包成多个页面，而不是spa
第一步你需要HtmlWebpackPlugin
在webpack.config中配置成这个样子，生成多个页面。
new HtmlWebpackPlugin({
template: './src/index.html',
chunks: ['common', 'index']
}),
new HtmlWebpackPlugin({
filename: 'list.html',
template: './src/list.html',
chunks: ['common', 'list']
}),
new HtmlWebpackPlugin({
filename: 'detail.html',
template: './src/detail.html',
chunks: ['common', 'detail'] //这里是页面中允许加入哪几个js 这里你可以看到require方式的影子
}),
另外就是在入口文件中配置以下就行了。
entry: {
index: './src/js/index.js',
list: './src/js/list.js',
detail: './src/js/detail.js'
},
总结一下
webpack的使用方法就为各位总结到这里啦，极简系列的文章都是龙哥总结的干货。最重要一点讲究即插即用，你完全可以复制本文中的代码到项目中，立刻对你的推广单页或者本地项目做一个优化—webpack可以做的事情远不止我本文中介绍的那些，本文只是介绍使用方法和原理，更多高级玩法还是需要你自己去开发，加油！
网友评论