webpack4.x入门配置
1、首先npm install webpack webpack-cli webpack-dev-server -g (mac电脑用超级管理员的形式进行安装需要前面加上sudo,Windows 电脑不用加sudo)
image.png
1.1输密文的密码（也就是电脑登陆的密码）安装开始…………
image.png
1.2安装成功如下
image.png
2、输入命令mkdir config dist src创建三个文件夹
image.png
2.1文件夹如下所示：
image.png
3、输入命令
npm init -y
image.png
3.1细心的你应该发现编辑器里面多了package.json这个文件
image.png
package.json文件里面的内容是最初的样子
{
"name": "study_webpack2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
4、输入命令touch dist/index.html src/index.js分别dist和src文件夹下面创建一个index.html文件和index.js文件
image.png
项目目录目前如下：
image.png
5、webpack4.x中打包默认找src/index.js作为默认入口，可以直接在终端中输入命令
webpack 将当前的内容进行一个简单的打包
image.png
这时候看下你的项目目录dist文件下是不是多了一个main.js文件
image.png
5.1细心的小伙伴应该看到打包的时候终端中会出现黄色的警告提示
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
mode是webpack中独有的，有两种打包环境，一个是开发环境：development另外一个是生产环境：production
打包的时候输入webpack --mode=development或者webpack --mode=production就不会出现警告提示了
image.png
下面是webapck --mode=production命令打包，这个是代码压缩过的，细心的朋友应该也发现打包后小了很多
image.png
同时项目文件夹下面多了 一个node_modules文件夹
image.png
6、输入命令
touch config/webpack.dev.js创建文件
image.png
回车后，现在项目目录如下：
image.png
7、输入命令
rm dist/main.js src/index.js移除掉这两个文件我们自己来配置
image.png
项目目录如下：
image.png
7.1 现在在src文件夹下面创建main.js文件
image.png
7.2进入到webpack.dev.js文件中进行配置，具体在代码中注释（这里简单的一些，具体的下面会给大家）
image.png
7.3现在不能执行之前的webpack --mode="development"命令了会报下面的错误
image.png
这里是因为webpack4打包默认找的src下面的index.js入口，我们前面已经删除了，这里src下面死main.js文件，所以找不到就报ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/yubo/Desktop/www/study_webpack2'错误，所以这里我们到packsge.json里面配置下命令，让打包的时候执行我们在config/webpack.dev.js下面配置的入口。
image.png
这个时候我们在终端执行输入命令
npm run build就可以了
image.png
8、现在配置打包时候的入口文件以及出口文件，很多朋友应该也看到webpack.dev.js中的注释的，这里的入口是
'./src/main.js'
//入口文件的配置项
entry:{
//里面的main是可以随便写的
main:'./src/main.js'
}
image.png
//入口文件的配置项
entry:{
//里面的main是可以随便写的
main:'./src/main.js',
main:'./src/main2.js' //这里新添加一个入口文件
},
这个时候我们再使用之前配置的命令 npm run build 进行打包
image.png
我们会发现报错提示 Conflict: Multiple assets emit to the same filename bundle.js 翻译过来告诉我们 冲突:多个资产发出相同的文件名bundle.js。这个时候就需要我们来配置出口文件了，下面是之前的出口文件
//出口文件的配置项
output:{
//打包的路径
path:path.resolve(__dirname,'../dist'),
//打包的文件名称
filename:'bundle.js'
},
现在我们将原来写死的bundle.js给改成了 [name].js
image.png
这个时候我们再执行打包命令看下
image.png
已经打包好了，这个时候看下出口文件dist下面也打包生成了两个相同入口名字的文件
image.png
注：[name]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个文件。
9 、设置webpack-dev-server，刚开始的时候我们就全局下载这里就不需要下载了，现在需要配置一下devServer。最简单的devServer配置项只有四个
image.png
这个时候直接执行命令
webpack-dev-server会报错
image.png
这个时候我们可以到packsge.json里面配置下
image.png
这个时候我们终端输入命令
npm run server就可以跑起来了
image.png
然后我们再到项目dist文件夹下面的index.html 文件中引入打包的两个js
<!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>Document</title>
</head>
<body>
<div id="study"></div>
<script src="./main.js"></script>
<script src="./main2.js"></script>
</body>
</html>
保存后再到src文件下面分别给main.js和main2.js文件里面写一些东西。
这个是src/main.js文件下：
alert("11111")
这个是src/main2.js文件下：
document.getElementById("study").innerHTML="hello webpack"
这个时候再再终端中输入命令 npm run server 然后再打开浏览器再地址栏输入 locahost:8888 就可以看到效果了，注意这里的 locahost:8888 是之前你在下面这个文件配置的
devServer:{
//设置基本目录结构,用于找到程序打包地址
contentBase:path.resolve(__dirname,'../dist'),
//服务器的IP地址，可以使用IP也可以使用localhost
host:'localhost',
//服务端压缩是否开启
compress:true,
//配置服务端口号
port:8888
}
10、CSS文件打包
下面学习一下怎么样将我们的CSS文件打包，在学习CSS打包之前，需要先对webpack.dev.config.js里的Loaders配置项进行了解。
loaders可以把SASS文件的写法转换成CSS,也可以把我们项目中写的ES6、ES7等给编译成浏览器能解析的css，下面我们先在src文件夹下面创建index.css文件，并且写一些css在里面
项目路径： /src/css/index.css 里面编辑代码如下
image.png
这个时候需要在入口文件中引入才可以进行打包
image.png
这个时候我们在终端中输入命令进行打包，会看到这样的报错
image.png
这是因为我们要想用打包css需要下载配置css 的loader：style-loader 和 css-loader在终端输入命令
npm install style-loader css-loader --save-dev下载依赖
image.png
现在到webpack.dev.config.js中对module属性中的代码进行配置
image.png
这个时候我们的css . loader就配置好了，可以在命令终端中试着输入 npm run server看下
image.png
打包成功了，然后再进入到浏览器发现已经有效果了
image.png
11、下面我们来配置JS压缩
我的项目上线之前都会对代码进行压缩，很多都是通过插件的方式实现的，这里我们就先来引入一个uglifyjs-webpack-plugin(JS压缩插件，简称uglify)。
这里大家需要注意的：虽然uglifyjs是插件，但是webpack版本里默认已经集成，不需要再次安装。
我们需要在webpack.dev.config.js中引入uglifyjs-webpack-glugin插件
const uglify = require('uglifyjs-webpack-plugin');
引入后在plugins配置里new一个 uglify对象就可以了。
plugins:[
new uglify()
],
这个时候我们再终端运行命令 npm run bulid 进行打包会提示下载webpack-cli 命令输入yes
image.png
然后下载一会，下载好了以后，看下dist下面的出口main.js文件里面的js都被压缩了
image.png
12、打包HTML文件
现在我们来对html进行打包，这个时候我们需要将之前手动再dist文件夹下面写的index.html文件移到src文件夹下面，并去掉我们的JS引入代码并去掉我们的JS引入代码（webpack会自动为我们引入JS），然后让打包的时候自动再dist文件夹下面生成
image.png
然后我们对webpack.dev.config.js文件进行配置，先引入html-webpack-plugin插件，然后在终端下载
npm install --save-dev html-webpack-plugin
这个时候再到webpack.dev.config.js的plugins里面进行配置
//插件，用于生产模版和各项功能
plugins:[
new uglify(), //js压缩插件
new htmlPlugin({
minify:{ //是对html文件进行压缩
removeAttributeQuotes:true //removeAttrubuteQuotes是却掉属性的双引号。
},
hash:true, //为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
template:'./src/index.html' //是要打包的html模版路径和文件名称。
})
],
此时我们在终端输入 npm run build 看见dist文件下面自动为我们生成了一个index.html文件里面自动为我们引入了js如下：
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<meta http-equiv=X-UA-Compatible content="ie=edge">
<title>Document</title>
</head>
<body>
<div id=study></div>
<script type=text/javascript src=main.js?5a6cef00acf20ba2a991></script><script type=text/javascript src=main2.js?5a6cef00acf20ba2a991></script></body>
</html>
13、CSS中的图片处理
image.png
./src/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>Document</title>
</head>
<body>
<div id="study"></div>
<div class="img"></div>
</body>
</html>
./ src/css/index.css文件里面
.img{
background-image: url(../images/photo.jpeg);
width:466px;
height:453px;
}
打包看下会有报错
image.png
这里是因为我们缺少loader的解析,现在需要下载两个解析图片的loader
file-loader 和 url-loader
npm install --save-dev file-loader url-loader
解释下：
file-loader：解决引用路径的问题，拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。
url-loader：如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。
现在需要我们去webpack.dev.config.js文件配置下
//图片 loader
{
test:/\.(png|jpg|gif|jpeg)/, //是匹配图片文件后缀名称
use:[{
loader:'url-loader', //是指定使用的loader和loader的配置参数
options:{
limit:500 //是把小于500B的文件打成Base64的格式，写入JS
}
}]
}
此刻我们在终端中输入 npm run build 打包的时候就不会报错了，也可以看到我们的图片被打包了
image.png
注意：为什么只使用了url-loader
有的小伙伴会发现我们并没有在webpack.dev.config.js中使用file-loader，但是依然打包成功了。我们需要了解file-loader和url-loader的关系。url-loader和file-loader是什么关系呢？简答地说，url-loader封装了file-loader。url-loader不依赖于file-loader，即使用url-loader时，只需要安装url-loader即可，不需要安装file-loader，因为url-loader内置了file-loader。通过上面的介绍，我们可以看到，url-loader工作分两种情况：
1.文件大小小于limit参数，url-loader将会把文件转为DataURL（Base64格式）；
2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。
也就是说，其实我们只安装一个url-loader就可以了。但是为了以后的操作方便，我们这里就顺便安装上file-loader。
14、css分离和图片路径处理
这里我们主要学习把CSS从JavasScript代码中分离出来，还有一个是如何处理分离出来后CSS中的图片路径不对问题。
现在我们要下载一个css分离的插件： extract-text-webpack-plugin
我们在输入命令 npm install extract-text-webpack-plugin --save-dev
image.png
14.1下载完插件后，需要我们配置一下
image.png
14.2配置后需要在plugins属性中进行配置
new extractTextPlugin("css/index.css") //这里的/css/index.css 是分离后的路径
14.3现在还需要修改一下配置里面css的loader的配置
{
test:/\.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
}),
// css分离后这里需要重新配置，下面就注释了
// use:[
// {loader: "style-loader"},
// {loader:"css-loader"}
// ]
},
image.png
是因为我们用的是webpack4.0.0以上版本
现在看下package.json文件
"devDependencies": {
"css-loader": "^0.28.11",
extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15"
}
解决办法：
npm install --save-dev extract-text-webpack-plugin@next
会下载到+ extract-text-webpack-plugin@4.0.0-beta.0
image.png
然后在打包就正常了
image.png
14.5现在配置下我们的路径问题
publicPath：是在webpack.dev.config.js文件的output选项中，主要作用就是处理静态文件路径的。
在处理前，我们在webpack.dev.config.js 上方声明一个对象，叫website。
var website ={
publicPath:"http://localhost:8888/"
// publicPath:"http://192.168.1.103:8888/"
}
这里的IP和端口，是你本机的ip或者是你devServer配置的IP和端口。
然后在output选项中引用这个对象的publicPath属性。
output:{
//打包的路径
path:path.resolve(__dirname,'../dist'),
//打包的文件名称
filename:'[name].js', //这里[name] 是告诉我们入口进去的文件是什么名字，打包出来也同样是什么名字
publicPath:website.publicPath //publicPath：主要作用就是处理静态文件路径的。
},
image.png
15、处理HTML中的图片
在webpack中是不喜欢你使用标签<img>来引入图片的，但是我们作前端的人特别热衷于这种写法，国人也为此开发了一个：html-withimg-loader。他可以很好的处理我们在html 中引入图片的问题，如何把图片放到指定的文件夹下
//图片 loader
{
test:/\.(png|jpg|gif|jpeg)/, //是匹配图片文件后缀名称
use:[{
loader:'url-loader', //是指定使用的loader和loader的配置参数
options:{
limit:500, //是把小于500B的文件打成Base64的格式，写入JS
outputPath:'images/', //打包后的图片放到images文件夹下
}
}]
}
现在下载 html-withimg-loader 解决的问题就是在hmtl文件中引入<img>标签的问题.
首先安装
npm install html-withimg-loader --save-dev
到webpack.dev.config.js中配置loader
{
test: /\.(htm|html)$/i,
use:[ 'html-withimg-loader']
}
image.png
16、Less文件的打包和分离
下面主要说下Less文件如何打包和分离。Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
首先要安装Less的服务
npm install --save-dev less
然后再安装Less-loader用来打包使用
npm install --save-dev less-loader
现在再去webpack-dev.config配置less-loader
//less loader
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "less-loader" // compiles Less to CSS
}]
}
编写一个less文件
src/css/indexless.less
@base :#000;
#study{
width:300px;
height:300px;
background-color:@base;
}
image.png
16.1把Lees文件分离。
这里和上面css文件分离基本一样，
//less loader
{
test: /\.less$/,
use: extractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "less-loader"
}],
// use style-loader in development
fallback: "style-loader"
})
// [{
// loader: "style-loader" // creates style nodes from JS strings
// },
// {
// loader: "css-loader" // translates CSS into CommonJS
// },
// {
// loader: "less-loader" // compiles Less to CSS
// }]
}
image.png
16.2 SASS文件的打包和分离
其实sass跟less 的配置很像，这里sass首先要安装两个包，node-sass和sass-loader,因为sass-loader依赖于node-sass，所以需要先安装node-sass
npm install node-sass --save-dev
然后下面再安装 sass-loader
npm install sass-loader --save-dev
配置loader配置
//scss loader
{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
}
这里跟上面的less 一样，写好loader配置后，就可以编写sass文件了，但是不要忘记把sass文件引入到main.js中。
16.3把SASS文件分离。
上面已经下载过了插件，这里直接用就可以了
{
test: /\.scss$/,
use: extractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}],
// use style-loader in development
fallback: "style-loader"
})
}
配置好以后我们 `npm run build` 就可以看到了dist下面的index.css中有了indexsass.scss中写的被解析的代码
16.4 自动处理CSS3属性前缀
首先需要安装两个包postcss-loader 和autoprefixer（自动添加前缀的插件）
npm install --save-dev postcss-loader autoprefixer
postCSS推荐在项目根目录（和webpack.config.js同级），建立一个postcss.config.js文件。【注意⚠️：一定呀建在根目录下，不然会报错】
module.exports={
plugins: [
require('autoprefixer') //自动添加前缀插件
]
}
在webpack.dev.cnfig.js中配置
{
test:/\.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use:[{loader:"css-loader"},
{
loader:"postcss-loader",
},
]
})
},
现在在index.css中写一些代码不带前缀的，命令打包后在看下，这个时候已经自动为我们加上了前缀。
17、消除未使用的CSS
使用PurifyCSS可以大大减少CSS冗余，比如我们经常使用的BootStrap(140KB)就可以减少到只有35KB大小。这在实际开发当中是非常有用的。
安装PurifyCSS-webpack
PurifyCSS-webpack要依赖于purify-css这个包，所以两个都要下载
npm install purifycss-webpack purify-css --save-dev
因为我们需要同步检查html模板，所以我们需要引入node的glob对象使用。在webpack.dev.config.js文件头部引入glob
const glob = require('glob');
同样在webpack.dev.config.js文件头部引入purifycss-webpack
const PurifyCSSPlugin = require("purifycss-webpack");
然后在webpack.dev.config.js中配置 plugins
new PurifyCSSPlugin({
//这里配置了一个paths，主要是需找html模板，purifycss根据这个配置会遍历你的文件，查找哪些css被使用了。
paths: glob.sync(path.join(__dirname, 'src/*.html')),
}),
注意： 使用这个插件必须配合extract-text-webpack-plugin这个插件
18、给webpack增加babel支持
Babel的安装与配置
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
在webpack.dev.config.js中配置Babel的方法如下：
//babel 配置
{
test:/\.(jsx|js)$/,
use:{
loader:'babel-loader',
options:{
presets:[
"es2015","react"
]
}
},
exclude:/node_modules/
}
然后在main.js中用es6语法写一些代码，然后打包就可以看见打包成功了
18.1、.babelrc配置
虽然Babel可以直接在webpack.config.js中进行配置，但是考虑到babel具有非常多的配置选项，如果卸载webapck.config.js中会非常的雍长不可阅读，所以我们经常把配置卸载.babelrc文件里。
在项目根目录新建.babelrc文件，并把配置写到文件里。
.babelrc文件下
{
"presets":["react","es2015"]
}
这时候.webpack.dev.config.js里的loader配置
//babel 配置
{
test:/\.(jsx|js)$/,
use:{
loader:'babel-loader',
},
exclude:/node_modules/
}
18.3、 ENV：
现在网络上已经不流行babel-preset-es2015，现在官方推荐使用的是babel-preset-env,那我们为了紧跟潮流，我们在讲一下env的配置方法。
首先需要下载：
npm install --save-dev babel-preset-env
然后修改.babelrc里的配置文件。其实只要把之前的es2015换成env就可以了。
{
"presets":["react","env"]
}
