从零开始学webpack笔记 2

最新推荐文章于 2024-09-16 18:00:00 发布

NK_Sasoli

最新推荐文章于 2024-09-16 18:00:00 发布

阅读量169

点赞数

分类专栏： webpack学习笔记文章标签： webpack node.js javascript

本文链接：https://blog.csdn.net/nk_Sasoli/article/details/105840378

版权

webpack学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

自行学习整理，边学边记，没了解过webpack的同学可以一点点看完，或许会有些帮助，不成熟的地方欢迎指正，转载请注明出处！！！

上篇我们进行了最简单的打包，但只针对js，这篇我们把html文件也打包进dist，让项目能跑起来

1，首先把html的基础框架写好

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

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

<body>
</body>

</html>

不需要写script标签，因为webpack会帮我们自动填充

2，安装html-webpack-plugin模块

使webpack有能力去解析html文件

npm i html-webpack-plugin -D

3，编辑webpack.config.js

引入html-webpack-plugin模块，增加plugins启动插件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = () => {
  return {
    // entry: path.resolve(__dirname, 'src/index.js'),
    entry: path.resolve(__dirname, 'src', 'index.js'),
    // entry: {
    //   build: [path.resolve(__dirname, 'src/index.js')]
    // },
    output: { 
      filename: 'js/[name].js',
      path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
      new HtmlWebpackPlugin(),
      // new HtmlWebpackPlugin({
      //   title: 'webpack-learn',
      //   template: './src/index.html'
      // }),
      // 创建多页面使用,配合多入口使用
      // new HtmlWebpackPlugin({
      //   filename: 'second.html',
      //   title: 'webpack-learn',
      //   template: './src/index.html'
      // }),
    ]
  }
}

HtmlWebpackPlugin配置项注解：
title：此项可以在打包时自动输出html文件title标签中的内容，但html的title需要使用模板语法动态写入

<title><%= htmlWebpackPlugin.options.title %></title>

template：html文件模板（母版），以此文件进行打包
filename：打包后文件名

4，运行打包

npm run build-dev

然后我们就能看到dist目录多出了html文件，并且引入了打包后的js代码

5，那我们怎么能让项目跑起来呢

只需要安装webpack-dev-server，并且不用改动webpack.config.js

npm i webpack-dev-server -D

6，只要更改package.json文件，添加start命令

  "scripts": {
    "start": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build-dev": "webpack --mode=development",
    "build-pro": "webpack --mode=production"
  },

然后终端运行命令

npm start

服务就启动了，此时对index.js文件做一些修改，可以发现也会监听文件变更，也就是做到了热更新

7，浏览器自动打开

运行start后如果不出意外可以看到服务已经启动了
截屏2020-04-28 15.53.10.png
这时可以手动在浏览器输入紫色的网址，但这么麻烦的事我们是不愿意做的
所以我们需要在package.json中再做一些简单的修改，加 –open，这样再npm start时，浏览器就自己打开了

  "scripts": {
    "start": "webpack-dev-server --open",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build-dev": "webpack --mode=development",
    "build-pro": "webpack --mode=production"
  },

到此我们已经简单的完成了把html文件打包，项目在服务环境中运行两个重要功能

8，清空打包文件夹

当我们更改了入口文件名或输出文件名时，会出现有多个打包文件存在的情况，这些多余的不需要的文件不可能一个一个手动删除，所以现在需要在运行build时先清空打包文件夹，再把打包文件写入
我们有两种方法可以实现这个效果
第一种：更改package.json的build命令

  "scripts": {
    "start": "webpack-dev-server --open",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build-dev": "rm -rf dist && webpack --mode=development",
    "build-pro": "rm -rf dist && webpack --mode=production"
  },

但如果我们的输出路径有变化，还需要再把dist改为新的文件夹名，所以我们可以使用一个插件
第二种：clean-webpack-plugin插件
先安装插件

npm i clean-webpack-plugin -D

使用方法很简单，先引入插件，这里注意引用方式

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

然后在plugins中启用插件

    plugins: [
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin(),
      // new HtmlWebpackPlugin({
      //   title: 'webpack-learn',
      //   template: './src/index.html'
      // }),
      // 创建多页面使用,配合多入口使用
      // new HtmlWebpackPlugin({
      //   filename: 'second.html',
      //   title: 'webpack-learn',
      //   template: './src/index.html'
      // }),
    ]