webpack4教程笔记（更新中）

最新推荐文章于 2021-07-08 17:50:41 发布

Sheldon一蓑烟雨任平生

最新推荐文章于 2021-07-08 17:50:41 发布

阅读量202

点赞数

本文链接：https://blog.csdn.net/qq_39055970/article/details/106410589

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

webpack4教程

准备工作
项目安装本地webpack
webpack如何进行配置
- webpack本身是0配置的
- 如何进行手动配置
如何结合页面

准备工作

安装node和yarn，安装就成不是本文章的重点。所以请自行百度。

项目安装本地webpack

（1）创建一个项目，比如webpack-dev-1
（2）进入项目终端， yarn init -y 初始化
（3）进入项目，安装本地webpack，进入终端输入一下命令

webpack webpack-cli -D （-D表示是开发依赖，上线的时候可以不需要）
node_modules/.bin/webpack -v （查看安装的本地webpack版本号）

webpack如何进行配置

webpack本身是0配置的

（1）创建src目录，并且在下方创建需要的文件，比如js文件，通常创建index.js作为整个项目的js入口。我这里创建了两个js文件，作为模块引用的示范。
在这里插入图片描述
（2）npx webpack 自动打包生成dist文件夹和main.js，这是webpack进行0配置时候的情况。打包默认支持模块化。

如何进行手动配置

（1）创建根目录下的默认配置文件 webpack.config.js （写在项目文件夹下）
（2）在webpack.config.js中使用以下写法，使用node写法，定义入口文件和出口文件：

let path = require('path');
console.log(path.resolve('dist'));
module.exports = {
    mode: 'development', //模式 默认两种 生产模式 production 和 开发模式 development
    entry: './src/index.js', //入口
    output: {
        filename: 'bundle.js', //打包后的文件名
        path: path.resolve(__dirname, 'build'), //路径必须是一个绝对路径
    }
}

（3）终端输入 npx webpack 就会自动打包生成配置build文件夹和编译好的入口js文件bundle.js
在这里插入图片描述
（4）题外话：如果不想使用原来的默认配置文件 webpack.config.js这个名称，可以修改为 webpack.config.my…js等其他任意名称，但是此时npx webpack则不会生效，需要输入

npx webpack --config webpack.config.my.js

才能够执行编译打包工作。
（5）如果认为命令行太长的话，可以在package.json文件中进行快捷代码的配置：

 "scripts": {
    "build": "webpack --config webpack.config.js",
  },

在这里插入图片描述
此时命令行输入 npx run build或者npm run build和npx webpack --config webpack.config.my.js是一样的，都是打包编译js文件。

如何结合页面

引入页面

在生成的build文件夹下创建一个index.html文件，并且引入生成的js文件：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

</html>

在这里插入图片描述
打开页面的效果如下：

打开页面的方式有多种，如下：

但是建议使用装一个本地服务的方式来打开页面，这样会比较方便。

如何使用本地服务打开页面

（1）输入命令行yarn add webpack-dev-server用来安装一个本地的服务
（2）输入命令行npm webpack-dev-server可以起一个本地服务
但是这样不能够指定端口，因此需要进行配置。

如何手动配置本地服务

（1）先在package.json文件中加入快捷代码
在这里插入图片描述

"dev": "webpack-dev-server"

（2）在webpack.config.js文件中进行开发服务器的配置：

devServer: { //开发服务器的配置
        port: 8623, //端口如果被占用，就会出现404，此时修改为其他没有被占用的端口即可
        progress: true, //显示进程
        contentBase: './build', //服务器寻找的文件夹，会自动打开该文件夹下的index.html文件
    },

在这里插入图片描述
（3）终端执行npm run dev，Ctrl+单击网址或者直接在网页中输入该网址，即可打开对应的index.html

（4）需要特别注意的是，如果页面出现了404，说明端口被占用，回到webpack.config.js配置文件中修改port为不被占用的端口即可

安装html插件

原本build文件中的index.html文件是我们自己放上去的。其实可以通过插件的方式，在src文件夹放一个html文件，进行html插件的配置，就可以实现build文件夹中的html文件和js文件的同时更新。
（1）终端输入yarn add html-webpack-plugin -D安装html插件
（2）src文件夹下创建index.html文件，不指定script
在这里插入图片描述
（3）在config文件中进行插件的引入和配置：

//webpack 是node写出来的 node写法
let path = require('path');
console.log(path.resolve('build'));
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    devServer: { //开发服务器的配置
        port: 8623, //端口如果被占用，就会出现404，此时修改为其他没有被占用的端口即可
        progress: true, //显示进程
        contentBase: './build', //服务器寻找的文件夹，会自动打开该文件夹下的index.html文件
        compress: true
    },
    mode: 'development', //模式 默认两种 生产模式 production 和 开发模式 development
    entry: './src/index.js', //入口
    output: {
        filename: 'bundle.js', //打包后的文件名
        path: path.resolve(__dirname, 'build'), //路径必须是一个绝对路径
    },
    plugins: [ //数组 放着所有的webpack插件
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html'
        })
    ]
}

（4）删除原来的build目录，重新在终端输入npm run build ，就会重新自动生成build目录，并且包含js和index.html文件。
在这里插入图片描述
（5）重新终端输入npm run dev 单击连接，即可打开对应的端口

对html插件进行更多的配置

plugins: [ //数组 放着所有的webpack插件
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true, //删除不必要的双引号
                collapseWhitespace: true, //折叠空行
            },
            hash: true //哈希戳：每次自动生成的不一样的一组数字
        })
    ]

其中哈希戳也可以用于生成不同的js文件，防止被覆盖如果hash:8就表示只生成8位的哈希数字

output: {
        filename: 'bundle[hash].js', //打包后的文件名，如果加上哈希戳 'bundle[hash].js' 就会每次生成不同的带有哈希戳的bundle.js文件,防止被覆盖
        path: path.resolve(__dirname, 'build'), //路径必须是一个绝对路径
    },

Sheldon一蓑烟雨任平生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
webpack4教程笔记（更新中）

webpack4教程准备工作项目安装本地webpackwebpack如何进行配置webpack本身是0配置的如何进行手动配置如何结合页面引入页面如何使用本地服务打开页面如何手动配置本地服务安装html插件对html插件进行更多的配置准备工作安装node和yarn，安装就成不是本文章的重点。所以请自行百度。项目安装本地webpack（1）创建一个项目，比如webpack-dev-1（2）进入项目终端， yarn init -y 初始化（3）进入项目，安装本地webpack，进入终端输入一下命令
复制链接

扫一扫