webpack4.X版本配置教程

Webpack4.X版本使用教程

基本配置

1. 首先创建一个项目根文件夹，然后根目录下再创建一个名为src子文件夹，然后在这个src子文件夹下再创建一个index.html文件和一个main.js入口文件。

   注意：

   • src文件夹是我们的工程文件夹，基本上我们所写的页面，组件之类的都会放在这个文件夹里。
   • 其实还有一个dist文件夹，是我们最后打包输出的文件夹。【不过这个文件夹不用创建，webpack会自动帮我们创建我们指定的打包文件目录】

2. 在终端中运行命令npm init -y，进行文件夹的初始化，记得一定要是在项目根目录下，然后就会出现我们的package.json配置文件。

3. 下载webpack,webpack-cli，把webpack进行一个局部的安装。【下载时使用cnpm，更快一点。】

   运行的命令：cnpm i webpack webpack-cli -D

4. 在package.json文件的scripts对象里，添加"start":"webpack"

   • 如果直接在终端中使用命令npm start运行项目，会直接报错，大体是提示我们找不到入口文件，找不到一些模块啊之类的错误。

5. 此时我们就需要在根目录下创建一个配置文件webpack.config.js，来告诉webpack我们的文件在哪里，应该怎么走。
   以下是我们第一步创建的内容。【文件一定是在项目的根目录下和package.json平级】

   const path = require('path') // 引用node包里的path工具
   
   module.exports = {
       mode:'development',// 设置打包方式为开发者模式，production为生产者模式
       entry:'./src/main.js',// 配置入口文件
       output:{ //配置出口文件
           filename:'bundle.js', //配置打包后的文件名，前面可加hash值：[hash:8]-bundle.js
           path:path.join(__dirname,'./dist')// 配置打包后文件的输出路径
       },
   }
   

   运行npm start，webpack就会为我们自动打包，并自动创建我们指定的dist文件夹，以及bundle.js。

配置一些文件加载工具【loader】

一些后缀文件，例如.css样式文件，.jpg图片文件，.ttf字体文件等，是没有办法直接在我们的项目里使用的，需要配置相应的文件加载工具。
配置css-loader,加载样式文件

1. 在html文件中写一个<div class="box">hello world</div>【主要是为了看效果，写啥都行】

2. 在src文件夹下，创建一个css文件夹，里面写上一个index.css，里面写上你喜欢的box的样式。

3. 在mian.js入口文件中引入样式文件

   import './index.css' // 引入样式文件
   

   此时我们进行项目打包的话，会报错，因为webpack无法识别这个文件。

4. 要想加载css文件，我们需要安装两个工具包，style-loader和css-loader

   运行的命令：cnpm i style-loader css-loader -D

5. 然后在webpack.config.js文件中配置规则：

       module:{
           rules:[ //这里匹配的是规则
               {test:/\.css$/,use:['style-loader','css-loader']}, //这是一个正则表达式：匹配到以.css结尾的文件，以这两个loader来解析
           ]
       },
   

   注意：这个 module对象 和前面的 output配置出口文件 的对象是平级的。
   每次更改了配置文件，我们都需要重新打包一下，更新打包文件

6. 运行npm start打包后，我们在html文件里，引入我们打包后的bundle.js文件，然后在浏览器中打开，就能在页面中看到效果。

7. 如果使用了less或者scss，我们还需要另外下一个less-loader或者scss-loader去解析这两个以.less和以.scss结尾的文件。
   配置：

   // 这里只配置了less
   {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
   

配置url-loader，加载图片

1. 还是那种情况，如果我们在src文件夹下创建一个images文件夹，放入一张图片，然后我们在css文件里，通过background:url()，引入成背景图片，打包会直接报错，【当然，如果直接在html里通过img链入不会报错】。

2. 所以我们需要工具来帮助我们解析图片文件。
   运行的命令:cnpm i url-loader -D

3. 在webpack.config.js里的rules里配置规则：

   {test:/\.(png|svg|jpg|gif|webp)$/,use:'url-loader'},// 匹配到图片文件，以url-loader来解析。
   

4. 此时，运行npm start打包，然后在浏览器中打开html文件，即可发现图片显示出来了。

字体文件的配置和图片文件基本类似，配置好你要使用字体文件后缀，然后使用url-loader加载即可。

使用webpack-dev-server自动打包

1. 首先下载这个包，运行命令：

   cnpm i webpack-dev-server -D 
   

2. 然后在webpack.config.js文件里，创建一个devServer:{}对象。

   注意：这个对象，也是直属于module.exports = {}里，也是和output输出对象平级。

       devServer:{
           contentBase:'./src',// 自动打包显示的文件路径，会自动找到src文件夹下的index.html文件
           hot:true,// 启用热更新
           port:3000, // 启用的端口号
           open:true // 自动打开浏览器
       }
   

3. 然后配置package.json文件，在这个文件的scripts对象里写上一行"dev":"webpack-dev-server"

   至此，我们使用npm start打包就暂时结束了，接下来我们就直接运行npm run dev启动webpack-dev-server。
   npm start由于直接是webpack打包，所以在我们的项目完全写完结束时，直接运行此命令，就可以把整个项目打包出来。

   • 当然这个时候，我们是可以直接去运行npm run dev启动项目了，但是启动成功后，【浏览器会自动启动然后访问http://localhost:3000端口】但是你会发现没有效果，连样式都没了，报错了。

   一般会报两个错误，一个favicon.ico的错误，不用管，另一个才是重要的，一般是提示你Failed to load resource: the server responded with a status of 404 (Not Found) bundle.js:1，

4. 其实问题就出在引用bundle.js的路径上。

   验证方法：

   此时我们即便把本地dist里的bundle.js删除，你会发现页面还是会显示，还是报的一样的错误。

   所以，我们要更改引入的bundle.js的路径，webpack-dev-server在帮助我们运行项目的时候，其实帮我们自动打包，并把生成的bundle.js托管到了内存里，所以我们运行的时候，直接引入即可。

   <script src="bundle.js"></script>

   在此使用npm run dev就会发现样式回来了。

   测试自动打包： 不用停止我们的项目，直接去更改样式，保存之后在浏览器里刷新，你就会发现页面变了，这就证明我们的自动打包成功了。

5. 顺带提一句，要想停止webpack-dev-server，使用ctrl+c，然后输入Y即可。

使用html-webpack-plugin插件，自动引入打包文件，实现页面的自动刷新

1. 要使用html-webpack-plugin插件，首先要先下载插件。

   运行命令：cnpm i html-webpack-plugin -D

2. 接着在webpack.config.js里进行插件的配置。

   • 首先要引入插件：const HtmlWebpackPlugin = require('html-webpack-plugin')，就像开头引入的path那样

   • 接着，配置插件信息：

         plugins:[
             new HtmlWebpackPlugin({
                 filename:'index.html',// 插件打包后输出的文件名
                 template:'./src/index.html' // 插件打包文件的路径
             })
         ]
     

     注意：plugins插件配置也是直属于module.exports = {}，也是和output输出对象平级。

   • 这样我们在运行npm run dev时，就可以看到效果。其实这个插件是把我们的html页面也托管到了内存里，实现页面的自动实时刷新。

   • 如果我们右键查看网页源代码，你就会发现，它帮我们自动引入了bundle.js文件。

   

   此时我们在引入bundle.js就显得多余了，直接在html文件里删除即可。

这里插一个小插叙：
在visual studio code里，其实是有代码自动保存这个功能的，不知道的可以去我的博客可看一下，提供链接：vscode自动保存代码。
自动保存代码，配上自动刷新，如果能再开一个分屏，简直爽歪歪。

使用babel转换高级的ES6语法

1. 要使用babel，首先要下载三个包，分别是babel-loader,@babel/core,@babel/preset-env

   运行命令：cnpm i babel-loader @babel/core @babel/preset-env -D

   提示：

   命令中，千万不要写成babel-core，babel-preset-env

   这样的写法，是babel6.X的版本，这跟我们默认下载的webpack4.X版本和babel-loader8.X版本不符。

2. 下载完成之后，配置我们的webpack-config.js文件：

   在我们的rules规则配置里添加：

   {
       test: /\.js$/, 
       exclude: /node_modules/, //由于babel转换比较消耗性能，并且node_modules的文件比较多，也并不需要转换，所以要排除
       use: [{
           loader: 'babel-loader',
           options: {
               presets:['@babel/preset-env'] //可以根据配置的目标浏览器或者运行环境来自动将ES2015+的代码转换为es5。
           }
       }]// 这里配置的是babel转换ES6语法的规则
   }
   

3. 配置完成之后，我们测试一下:

   • 在html文件里写上一个按钮:<input type="button" value="点击" id="ipt">

   • 在我们的main.js文件里，用一下箭头函数【直接写即可，如果另创建了js文件，只需要写好后在main.js里引入即可】：

     var ipt = document.getElementById('ipt');
     ipt.onclick = () => alert(123);
     

   npm run dev运行之后，打包成功，点击按钮，弹窗正常显示。

小结

1. 到这里，我们的webpack4.x基本配置就算结束了，但是这样，你有可能也是只知道，webpack怎么做成可以让页面自动刷新，自动帮我们打包，解析ES6语法等等。
2. 所以建议大家，可以在读完这篇博客后，找一个自己写的小项目，比如一个简单的登录注册，去实地的测试一下webpack打包。
3. 当然webpack还有许许多多其他的地方，大家可以去看看webpack官网。