webpack目前已经更新到4.8.3了，5.0指日可待，所以这篇文章后期应该会不停的修改更新webpack的最新语法
什么是webpack
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
这是官网给出的解释,实际上就是一个类似于gulp的模块化管理和打包工具，把一些浏览器不能支持的语法解析为浏览器可以支持的语法，同时可以压缩打包代码，让写代码变得容易起来。
如何安装webpack
webpack仍然是基于nodejs环境运行的，所以直接npm install webpack -D和npm install webpack-cli -D就可以了
注意不要将webpack下载到全局，后期会出问题
如何使用webpack
当你下载好一切的时候我们就可以开始使用它了。 首先，需要创建一个文件夹，里面放你的项目，在与你的项目同级的文件夹里面创建一个js文件，命名为webpack.config.js,这个文件就是webpack的配置文件，整个webpack的配置也是在这里面完成的
webpack入门开始
由于webpack的语法规定，我们所有的配置都写在
module.exports={
}
这个大括号里面，语法有没有很眼熟？没错，就是nodejs模块化抛出的语法，你问我为什么要这样写？我也不知道webpack的语法规定
其中的第一个参数为mode,是决定webpack模式的关键，不写的话不会报错，但是会提醒，建议加上，参数一共有两项
development 开发环境配置，如果出现错误，会告诉你错在了第几行代码上
production 线上环境配置，不会报错
我们先把这个参数写上
module.exports={
mode:'development'//作为一个励志成为程序员的码农当然需要的是开发环境了，注意用字符串格式
}
第二个参数是入口文件的路径entry，就是我们项目中的入口文件，我在项目的文件下创建了一个index.js作为我的入口文件，加上入口文件的配置
module.exports={
mode:'development'//作为一个励志成为程序员的码农当然需要的是开发环境了，注意用//字符串格式
entry:'./src/index.js'//这个地方写入口文件的路径，根据自己文件夹的结构写！
}
第三个参数是出口文件的配置output,就是当你一切都配置完成之后，webpack会帮你把一切都打包好，这时候它需要知道你打包后的文件夹需要放在哪里，要起什么样的名字，path里面写打包好的文件要放的位置，一定要写绝对路径,filename里面写你要给重新打包过的js起的新名字
const path = require('path');//1
module.exports={
mode:'development'
entry:'./src/index.js'//这个地方写入口文件的路径，根据自己文件夹的结构写！
output:{
path:path.resolve(__dirname,'littleDream')//2
filename:'[name].[chunkhash:6].js'//3
}
}
1.由于paht的地方必须要放绝对路径，所以我引了nodejs的这个内置模块，把我的路径转换为绝对路径
2.这个路径时我希望打包后的项目出现在的位置，littleDream这个文件夹webpack会帮我们创建好的
3.里面的这个名字是随意起的，[name]是一个变量，指的就是我本来js文件的名字,[chunkhash:6]是我为了防止缓存，随机生成了6位的随机数放在了文件名的后面，这个参数你也可以写为index.js,随意啦 下一个参数devServer也是一个对象，对象里面配置了一些开启本地服务需要配置的参数，和gulp的语法极其相似,里面主要的配置有三个
port
配置端口号，一般都是4,6,8开头的四位数字
open
启动本地服务之后打开自动打开浏览器，打开的是你的默认浏览器
setup
拦截中间件，我们在写前端数据的时候，很容易遇到一些向后台发送ajax请求的数据，这个属性就可以满足我们的需求,具体代码如下
devServer:{
port:8000//这个自己随意的
open:open//不写的话默认就是false
setup:function(app){
app.get('/data',(req,res)=>{//这里拦截了前端get方式的路由data,并且返回了一个json数据
res.json({
name:'小梦',
age:18
})
})
}
}
一个项目当中免不了要遇到各种类型的文件，webpack的宗旨就是将一切都模块化，所以需要一个配置将不同的后缀的文件匹配不同的编译模板，使其能够成功的模块化，有一点点绕对不对，我们边看代码边继续说
module: {
rules: [{
test: /\.vue$/,
use: 'vue-loader'
}, {
test: /\.js$/,
use: 'babel-loader'
}, {
test: /\.css$/,
use: ['style-loader', 'css-loader']//css是用来解析的，style是把css文件从js里面拿出来，放在html里面，从右向左解析
}, {
test: /\.(png|jpe?g|svg)$/,
use: 'url-loader'
}]
}
module就是模块的意思,rules就是规则,规则中规定了什么类型的文件要用什么模板来编译，test的值是一个正则表达式，如果符合这个正则表达式，webpack就会用use里面的loader来解析这个后缀名的的文件,他的强大之处在于可以将任何语言转为Javascript,也可以将静态资源转换加载出来,但不同类型的文件是需要用不同类型的loader来加载的,
vue后缀的文件需要用vue-loader来解析
js后缀的文件用babel-loader来解析,本篇文章中使用的都是ES6的语法，一些浏览器还不支持，所以使用了babel-loader将ES6语法解析为ES5的语法
图片的后缀名有很多，我只是写了几个常见的后缀名,url-loader可以将较小的图片转换为base64编码的格式
css后缀的文件比较特殊,因为在webpack中，所有的css是可以直接在js中引用的,所以我们需要两个loader来帮助我们,第一个css-style帮助我们解析css文件,另一个style-loader把css文件从JS文件里面拿出来，放在HTML里面去,webpack在解析的时候会从右向左解析,先解析css-loader,再解析style-loader,顺序改变的话就会出错
金无赤足，人无完人。webpack已经是一个很强大的前端打包工具，可还是有一些无法实现的功能，这时候就需要借助我们强大的插件plugins了。 先简单的给大家介绍一个插件html-webpack-plugins,这个插件是用来解析HTML的，里面的一些常用参数如下:
template: './index.html', //源文件
filename: 'index.html', //编译后的文件名
minify: {
minimize: true, //压缩代码
removeComments: true, //移除注释
collapseWhitespace: true, //去掉空格
minifyCSS: true, //压缩行内css
minifyJS: false //压缩行内js
}
template里面写你要打开的的页面的路径和名字
还有一个插件的名字是vue-loader,这个插件是用来编辑vue代码的
关于插件的使用
所有的插件在使用的时候都需要先利用require引入，然后new一下,具体用法如下
const Vue = require('vue-loader/lib/plugin');
const htmlWebapckPlugin = require('html-webpack-plugin');
使用的时候需要全部写在plugins里面
plugins:[
new Vue(),
new htmlWebpackPlugin({
template:'./index.html',
filename:'index.html',
minify:{
minimize:true,
removeComments:true,
collapseWhitespace:true,
minifyCSS:true,
minifyJS:true
}
})
]
到这里，我们的基本配置就完成了,我们来看一下刚刚都写了那些代码
const Vue = require('vue-loader/lib/plugin');
const htmlWebapckPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports={
mode:'development'
entry:'./src/index.js';
output:{
path:path.resolve(__dirname,'littleDream')
filename:'[name].[chunkhash:6].js'
},
devServer:{
port:8000,
open:open,
setup:function(app){
app.get('/data',(req,res)=>{
res.json({
name:'小梦',
age:18
})
})
}
},
module: {
rules: [{
test: /\.vue$/,
use: 'vue-loader'
}, {
test: /\.js$/,
use: 'babel-loader'
}, {
test: /\.css$/,
use: ['style-loader', 'css-loader']
}, {
test: /\.(png|jpe?g|svg)$/,
use: 'url-loader'
}]
},
plugins:[
new Vue(),
new htmlWebpackPlugin({
template:'./index.html',
filename:'index.html',
minify:{
minimize:true,
removeComments:true,
collapseWhitespace:true,
minifyCSS:true,
minifyJS:true
}
})
]
}
到现在为止，已经完成了webpack4.0从入门到放弃的全部内容，这些代码已经可以完成一个简单项目的打包压缩
如何运行webpack？
最基本的配置已经完成了，可是没有项目，所以也看不出来效果，我们来写一个简单的项目来运行一下这个webpack; 与webpack.config.js同级的目录中创建一个文件夹为src,这个文件夹就是我们的项目,然后在src文件夹里面创建一个js文件，命名为index.js,在同级的目录下再创建一个index.html,在index.html里面写一个id为app的div盒子,之后与index.html同级的目录下创建一个文件夹,命名为css,在css文件夹中创建文件style.css,然后在css文件中写一些简单的样式,然后在src的文件夹下创建一个vue格式的文件,命名为APP.vue,里面写上
<template>
<div>我是一个最简单的项目{{name}}</div>
</template>
<script>
export default {
data:function(){
return {
name:'hello word'
}
}
}
</script>
然后在index.js里面引用就可以了,index.js里面代码如下
import style from './css/style.css';
import Vue from 'vue';
import APP from './APP.vue';
new Vue({
el:'#app',
render:h=>h(APP)
});
一个最简单的项目就完成了,文件夹的结果有点不太清晰？我们直接看下面:
5.21
src
index.js
index.html
APP.vue
css
style.css
webpack.config.js
一个最基本的结构和项目就完成了,在webpack.config.js的部分打开cmd命令窗口直接运行webpack就可以了,运行完毕之后,再运行webpack-dev-server等本地服务起来之后浏览器窗口就会自动打开了。
关于webpack的基本配置到这里就算是结束了,如果想要学习更多关于webpack的知识请移步官网,最后面演示的时候写了一些vue的代码可能之前没有接触到,不要着急，马上就会更新，期待您的继续关注,文章中所有提到的loader和插件都需要npm下载模块 如果发现了错误的地方,恳请您指出来,对本篇文章有什么建议和批评请不要吝啬，我真诚的期待您的只言片语。
