webpack工程化及其配置指北（1）
现在前端脚手架工具已经非常智能化了。早年刚入行我曾经自己在项目里配过webpack，上午面向百度配置的内容，下午就重复不出来了。后来查了一个下午，才去看package.json，发现下午webpack从我上午用的2.x升级到4.x了。语法有了大变样。如果你面向百度百度编程，webpack部分是一定要带版本号的。
我也问过很多前端，你的项目是怎么创建的。他们都会理所当然地说：vue-cli啊！"webpack呢？"不了解。我的天呐。
简单使用
官⽅方⽹网站:https://webpack.js.org/
webpack is a module bundler.(模块打包工具)
Webpack可以看做是模块打包机:它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展言(Scss，TypeScript等)，并将其打包为合适的格式以供浏览器使用 。
npm install webpack webpack-cli -g//webpack-cli 可以帮助我们在命令⾏行行⾥里里使⽤用npx ,webpack等相关指令
webpack -v
npm uninstall webpack webpack-cli -g假如你在项目里安装了webpack 和webpack-cli。就可以打包了。
在src下新建index.js，输入console.log('hello webpack'),再执行:
npx webpack (使用项目的webpack版本)可以看到信息
这时项目多出了一个src文件，里面的main.js就是打包后的代码。0配置情况下webpack会自动找寻src下的index代码。
指定入口文件：
npx '路径/文件'再创建两个js:把自己的模块暴露出去
module.exports=()=>{
console.log('b')
}import a from "./a"; //需要使⽤用es moudule导出
import b from "./b"; //需要使⽤用es moudule导出
a();
b();
console.log('hello webpack');执行npx wqebpack， 几个js就打包成功了。
webpack是默认记住js文件的。但是不会认识图片。想认识，需要一个loader。
配置你的webpack
缺少配置的webpack其实是非常弱的。需要做进一步的配置。
入口和出口
默认文件是webpack.config.js，自己在根目录下新建一个吧！
const path =require('path');
module.exports={
// 入口文件 ，支持 string | array | object
entry:'./src/index.js',
// 出口文件,必须是绝对路径，需要借助node的核心模块path
output:{
path:path.resolve(__dirname,'dist'),
// 默认文件可使用占位符 []
filename:'[name].js'
}
}当然，入口文件你也可以这么写(指定了打包名称)：
entry:{
main:'./src/index.js'
}这里面没有任何的区别。但你至少多了一些选择。
模式
如果不配置mode，那么打包出来的文件默认都是压缩混淆后的代码。
开发环境你就设置mode为development吧。
在npm脚本指令中添加webpack命令
// package.json
...
"script":{
"dev":"webpack"
}
...那你可以用webpack run dev进行打包。
优化你的项目
一般来说，可以遵循一下习惯：
dist //打包后的资源⽬目录
node_modules //第三⽅方模块
src //源代码
css
images
index.js
package.json
webpack.config.jsloader
模块转换器，⽤于把模块原内容按照需求转换成新内容。webpack是模块打包⼯工具，⽽而模块不不仅仅是js，还可以是css，图⽚片或者其他格式 但是webpack默认只知道如何处理js模块，那么其他格式的模块处理，就需要loader了.
这里的loader用到的是 file-loader
npm i file-loader -d module:{
rules:[
{
// 指定你处理哪些后缀名的文件
test:/\.png$/,
// 使用什么loader
use:'file-loader'
}
]
}这时候我们再进行打包，图片就被打进去了。引入的图片是一个路径地址。
打包css呢？现在就来看一个全局样式文件怎么配置。
你可以看到一大堆loader。https://www.webpackjs.com/loaders/
包括你不知道如何处理模块时，就去找loader。
实例：打包你的前端项目
创建一个index.css和index.html
/* css/index.css */
*{
color: red;
text-align: center;
font-size: 30px;
}
.img{
width: 200px;
height: 200px;
margin:auto;
background: url('../img/a.png')
}<!-- ./index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="img"></div>
hello webpack
<script src="./src/index.js"></script>
</body>
</html>此时项目结构是这样的：
在项目样式里里引用了图片，
这时就需要许许多多必要的loader。都装上吧。
- Css-loader:处理样式文件。
- Style-loader:将样式挂载到html的header里。
- Post-cssloader: rules: [
{
// 指定你处理哪些后缀名的文件
test: /\.png$/,
// 使用什么loader
use: [
{
loader: 'url-loader',
options: {
outputPath: './img/', // 指定图片输入的文件夹
publicPath: './dist/img/', // 指定获取图片的路径
name: '[name].[hash:8].[ext]' // 输入的图片名
}
}
]
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
]打包之后，修改下html，直接引入main.js取消引入css。发现样式生效，那就成功了。