webpack傻瓜式入门教程-03

前言

  各位小伙伴们，最近事情很多，项目也同时两个一起并行，导致没有多少时间写点最近的webpack使用方法。好在今天得空，那我们就接着上篇教程【打包css和js，img】开始本篇教程，本人所有教程全部干货，简单直接，从不装逼卖萌，整一些看不懂的玩意儿忽悠大家，以体现自己多么牛逼！本人自学至今，把自己自学的路程所获得的方法直接发表出来给不会的小伙伴借鉴，如果任何不懂或者错误的地方，欢迎大家提出来。

目录

https://www.jianshu.com/p/9c9b555b52e8

---

项目结构图：

解析：

• dist：编译后的js文件。
• src：原始文件，包括原始的css和js文件。
• test.html：h5页面
• webpack.config.js：webpack的配置文件

导入第三方插件，如何打包？

例如：我们的test.js文件内引用了jquery，并且引入了test.css，如下所示：
test.js

let $ = require("jquery");
let style = require("../css/test");
let data = require("./data");$("body").css("background", "yellow");

文件引入了jquery和css之后，接下来开始配置webpack，如下：
webpack.config.js

const webpack = require("webpack");

module.exports = {
    entry: "./src/js/test.js", // 原始文件路径
    output: {
        path: __dirname + "/dist",  // 编译后的文件路径
        filename: "bundle.js" // 编译后的文件名
    },
    module: { // 模块
        rules: [ // 规则
            {
                test: /\.css$/, 
                loader: "style-loader!css-loader"
            } // 针对css所用的编译模块
        ]
    }
};

控制台输入webpack编译打包，编译之后的test.html效果如下:

有何问题？

1. 难道每次修改一点css或者js都要重新手动编译？
2. 难道每次编译之后都必须手动刷新页面才能看到效果，太麻烦了！

如何优化体验

• 问题一解决办法：监听文件修改，自动编译！
  package.json文件中添加一个属性

"scripts": {
    "build": "webpack"
}

解析如下：start什么意思？
   到目前为止，我们编译文件都是直接控制台输入webpack，这样子webpack就会根据webpack.config.js配置文件进行打包编译。但是如今我们在package.js的script属性中设置了build，那么现在我们该怎么编译打包呢？答案很简单，就是将以前使用的webpack改成npm run build，如图所示：

  大家可以发现，效果和之前使用webpack一样，文件一样被打包了，效果图没任何区别。
  说了这么多，但是还是没有说到点上，如何自动编译，自动编译，自动编译！小伙伴们不要着急，马上就来！
正如我们所看，编译修改成build之后，我们只需在build后面加上--watch，便可让webpack自动监听文件修改，并且自动编译打包！

效果如下：

  大家可以看到，我在上图标记的红色部分，为什么我要标记这一块？看下图，没有监听文件时我们build的结果：

image.png

  相信大家看出来区别了吧，没有监听的时候，build之后，命令执行完毕，恢复可执行其他命令的状态，如果监听了，那么命令行会待命，不会出现再让你输入新命令的输入框。

接下来，我们修改其中任意的文件，这里我以修改css为例：
test.css

#container{
    width: 200px;
    height: 200px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: blue;
}

然后刷新页面，看看效果：

  大家可以看到，我们没有再手动编译，页面却改变了，所以我们知道，我们已经由手动编译升级到了自动编译，自动监听文件被修改，然后自动完成打包编译，只需要我们刷新一下页面，就ok~。

• 问题2解决方法：如何页面也自动刷新呢？
    在这里，我们需要让页面也自动刷新，那我们便是需要一种热更新的能力，由系统自动检测文件修改而编译，然后浏览器自动刷新，那么我们就可以不用手动刷新页面了，完美，那我们该怎么做呢？就是使用webpack-dev-server。

1. webpack-dev-server可以搭建一个虚拟服务器，从而跑起来这个项目，然后热更新打包刷新页面，具体操作如下：

• 安装webpack-dev-server，然后在package.js中配置script，在刚才的build属性上配置start属性，如下图所示：

 "scripts": {
    "start": "webpack-dev-server --entry ./src/js/test.js --output-filename ./dist/bundle.js",
    "build": "webpack --watch"
  }

解析：--entry ./src/js/test.js --output-filename ./dist/bundle.js什么意思？
答：--entry是入口文件的配置，--output-filename是输出文件的配置

• 配置完毕，如下操作：

1. 我们开两个控制台，其中一个启动监听程序：

   
   
2. 另外一个控制台启动webpack-dev-server虚拟服务器：
   
   3.这时候我们开始修改一点css或者js，看看文件是否会自动编译，页面是否会自动刷新？这里我们修改一下body的背景颜色为天蓝色。

#container{
    width: 200px;
    height: 200px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: skyblue;
}

然后保存，此刻细心的小伙伴会发现浏览器控制台正在打印一句话，如下：

这句话是什么意思呢？意思就是正在更新编译后的页面。
随即我们可以看到页面自动更新了，效果如下：

  如果我们热更新失败呢？那么大家可以在webpack.config.js中添加一个配置，是关于热更新插件的配置，如下：

plugins: [
    new webpack.HotModuleReplacementPlugin()
]

总结

  经过我们本次的教程，大家应该都可以按成文件自动编译和页面热更新了，如果还有不懂得小伙伴，可以多跟着教程练习，一定要跟着练习，不要觉得看着简单，就不动手，因为要记住一句话：“站在岸上，你学不会游泳！”，如果本次教程的内容都掌握了的小伙伴们，这里还有一些东西要告诉你们，就是关于webpack的一些常用配置

devServer: {
      port: 80, // 自定义端口号
      hot: true, // 是否热更新
      compress: true, // 压缩代码
      open: true, // 自动打开浏览器
      overlay: true // 页面header会提示信息[警告和错误]
  },
  plugins: [
      new webpack.HotModuleReplacementPlugin() // 热更新插件
  ],
  resolve: {
      extensions: ['.js', '.less', '.css'] // 自动添加后缀名，require和import引入的内容就不必加后缀名了。
  }

后言

本次的教程重点有两点：

1. 如何监听文件修改，然后自动编译。
2. 如何在编译之后，让浏览器页面自动刷新。
   如果还有不懂得小伙伴们，可以通过简信联系我，谢谢大家的收看。

说明

原创作品，禁止转载和伪原创，违者必究！