Webpack4.X使用

基本配置

创建文件夹

创建一个根文件夹和一个 dist 子文件夹一个名为 src子文件，在src子文件夹下创建一个.html文件和一个.js入口文件。

  • 根文件夹
    • dist文件夹
    • src文件夹
      • index.html
      • main.js

注意：

  1. src文件夹是我们的工程文件夹，我们所用的文件都要在这个文件夹里。
  2. dist文件夹是我们最后打包输出的文件夹。（也可以不用建，webpack会自动帮我们创建）

初始化

在终端中运行命令

1
npm init -y

进行文件夹的初始化，然后会出现我们的package.json文件。

安装插件

在本地下载 webpack,webpack-cli,webpack-dev-server，这三个包

运行的命令：

1
cnpm i webpack webpack-cli webpack-dev-server -D

设置快捷启动命令

在 package.json 文件的 scripts 对象里，添加

1
"start":"webpack --config webpack.config.js"

这样就可以直接在终端中使用命令 npm start 运行。

webpack 会默认在你的根目录下找 webpack.config.js 文件，所以我们可以把命令简写成 “start” : “webpack”

创建配置文件

在根目录下新建配置文件 webpack.config.js

1
2
3
4
5
6
7
8
9
10
const path = require('path') // 引用node包里的path工具

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

运行 npm start ，webpack 就会为我们自动打包，并自动创建 dist 文件夹，生成bundle.js

注意：如果此时，我们在html文件里通过script标签引入bundle.js话，我们就已经可以看到效果了，当然我们需要在js文件里，写上一句console.log("Hello webpack")。如果能输出，这也证明，到现在为止，我们的使用是没有错误的。

配置loader

配置css-loader加载样式

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

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

  3. 在js文件中引入.css文件，import './style.css'（此时打包绝对失败）

  4. 安装两个包style-loader,css-loader

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

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

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

    注意：这个 module对象 和前面的 配置出口文件 的对象是平级的。

  6. 此时，运行npm start打包后，即可在页面中看到效果。

配置file-loader加载图片

  1. 如果我们直接在.html文件里，使用src=“”引入文件，可能就会出现文件无法打包解析的情况。

  2. 如果我们在css文件里，通过background:url()，引入图片，打包会直接报错，此时我们就需要这个file-loader。

    运行命令：

    1
    cnpm i file-loader -D

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

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

  4. 此时，运行npm run build即可发现图片显示出来了。

使用Webpack-dev-server自动更新

前面说基本配置的时候，已经下载过webpack-dev-server这个包了，所以这里直接去配置。

  1. 首先在webpack.config.js文件里，新建一个devServer:{}对象。

    注意：这个对象，也是直属于module.exports = {}里。

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

  2. 配置 package.json 文件，在这个文件的 scripts 对象里写上

    1
    "build":"webpack-dev-server"

    此时，我们就不需要再去运行npm start打包了，直接运行npm run build启动webpack-dev-server即可。甚至于，我们可以直接把start后面的webpack替换成我们的webpack-dev-server

    当然这个时候，我们是可以直接去运行webpack-dev-server了，但是启动成功后，当你在浏览器，访问http://localhost:3000的话，你会发现没有效果，连绿色的样式效果都没了。

  3. 问题就出在引用bundle.js的路径上.

    验证方法：

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

    所以，我们要更改引入的bundle.js的路径，webpack-dev-server在运行的时候，其实帮我们把bundle.js托管到了内存里，既然这样，我们运行的时候，直接引入即可，不用搞那么多复杂的路径。

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

    这样，我们在运行的时候，就会发现样式回来了。

    不用停止webpack-dev-server，直接去更改样式，保存之后在浏览器里刷新，你就会发现，样式也自动帮我们打包了

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

使用html-webpack-plugin插件

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

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

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

    1. 首先要引入插件：

      1
      const HtmlWebpackPlugin = require('html-webpack-plugin')

  1. 接着，配置插件信息：

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

    注意：plugins数组也是直属于module.exports = {}

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

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

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

使用babel转换ES6语法

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

    运行命令：

    1
    cnpm i babel-loader @babel/core @babel/preset-env -D

    提示：我们下载的是7.X的版本，babel-loader是 8.X命令中，千万不要写成 babel-core，babel-preset-env 这样的写法，是babel6.X的版本，和 webpack4.X 以及 babel-loader8.X 版本不符。

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

    在我们的rules数组规则里添加：

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

  3. 配置完成之后，我们测试一下:在.html文件里写上一个按钮:

    1
    <input type="button" value="点击" id="ipt">

    在我们的.js文件里，用一下箭头函数：

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

    npm run build运行之后，打包成功，点击按钮，会发现弹窗也正常显示。

小结

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