Vue CLI脚手架-CFANZ编程社区

1、node_modules依赖包

①我们通过项目终端输入npm i，就会生成该依赖包，依赖包会自动根据package.json文件中所有需要的东西进行封装下载，例如：jquery，vue2等等

②该依赖包因为承载项目的所有内容，在项目大的时候其所占内存也会很大。

③在项目传发时，依赖包是可以删除的，他人只需要输入npm i，即可下载回来

2、webpack安装

①npm install webpack@4 --save--dev：-save局部安装webpack

②npm install webpack -g：-g全局安装webpack

3、本篇项目例子是继续前篇文章的项目例子

Vue2之webpack篇（二）Loader_申小兮IU的博客-CSDN博客

loader处理css、图片、ES6转ES5、打包，分离vue，父子组件传参

一、Plugin

1、简介

（1）Plugin相当于一个插件

（2）功能

①可用于添加版权

②打包html到dist文件夹

拓展：项目完成后，项目部署到服务器上的就只有dist文件夹，但是前面文章所学内容并未将html打包到dist文件夹

③压缩js

拓展

生产环境：所有代码挤在一块，不留空隙，为了减少空间

开发环境：间隔回车错落有致，可读性强

（3）loader与plugin的区别

①loader主要用于转换某些类型的模块，是一个转换器

②plugin是插件，是对webpack本身的扩展，是一个扩展器

2、添加版权的plugin

webpack内置就有plugin，因此只需要在webpack.config.js中的plugins中配置插件

const webpack = require('webpack')
plugins:[
	new webpack.BannerPlugin('最终版权归')
]

配置

dist打包的bundle.js文件

3、打包html的plugin

（1）安装html-webpack-plugi

npm i html-webpack-plugi

（2）在webpack.config.js的plugins中配置htmlWebpackPlugin

const htmlWebpackPlugin = require('html-webpack-plugin')
plugins:[
    new webpack.BannerPlugin('最终版权归申小兮所属'),
    new htmlWebpackPlugin()
]

（3）webpack打包完，在dist文件夹中我们会看到多生成了一个html文件

（4）但是打开index.html查看，发现图片无法显示，是因为我们原先通过配置css-loader时，指定了html中引用图片的相对路径

（5）现在dist中已经有html文件了，就不需要设置图片的相对html文件路径，将publicPath: "./dist/"注释

// 处理css中图片的使用
{
  test: /\.(png|jpg|git)$/,
  /* 数组对象形式 */
  use: [
    {
      // 使用file loader，解析文件路径
      loader: "file-loader",
      // 配置
      options: {
        // 指定html中引用图片的相对html文件的路径
        // publicPath: "./dist/",
        // 指定文件名，一般会放在一个img相关的文件夹中
        name: "imgs/[contenthash].[ext]",
      },
    },
  ],
},

现在dist已经有html文件了，但是却找不到#app的template

①需要在配置htmlWebpackPlugin中添加指定html文件

plugins: [
  new webpack.BannerPlugin("最终版权归申小兮所属"),
  new htmlWebpackPlugin({
    template:'./class.html'
  }),
],

注意：class.html是项目中的html文件，不是dist文件夹中生成的html文件

②class.html文件也不需要再引入js，将引入语句注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>
<body>
    <div id="app"></div>
    <!-- <script src="./dist/bundle.js"></script> -->
</body>
</html>

③webpack打包，运行dist文件夹下的index.html文件

Vue CLI脚手架_css