共同学习Vue.js ---webpack的Plugin

文章目录

• 一、认识plugin
• • 1.1 plugin是什么?
  • 1.2 loader 和 plugin 区别
  • 1.3 plugin 的使用过程
• 二、添加版权的Plugin
• 三、打包html的plugin
• • 3.1 HtmlWebpackPlugin插件
  • 3.2 使用插件
• 四、 js压缩的Plugin
• 五、搭建本地服务器
• 六、 webpack的配置分离
• • 6.1 准备工作
  • 6.2 安装webpack合并插件
  • 6.3 执行遇到的问题

---

一、认识plugin

1.1 plugin是什么?

plugin 是插件的意思,通常是用于对某个现有的框架进行扩展.
webpack 中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文化压缩等等.

1.2 loader 和 plugin 区别

loader主要用于转换某些类型的模块,它是一个转换器或加载器;
plugin 是插件,它是对webpack本身的扩展,是一个扩展器.

1.3 plugin 的使用过程

步骤一: 通过npm安装需要使用的plugins (某些webpack已经内置的插件不需要安装)
步骤二: 在webpack.config.js 中的plugin 中配置插件

二、添加版权的Plugin

给打包的文件添加版权声明的plugin
该插件名字叫BsnnrtPlugin,属于webpack自带插件.
安装下面的方法来修改webpack.config.js 的文件:

const path = require('path');
const webpack = require('webpack');
...
plugins: [
      new webpack.BannerPlugin('最终版权归Liu所有')
  ]

重新打包程序: 查看bundle.js 文件的头部,看到如下信息:

三、打包html的plugin

3.1 HtmlWebpackPlugin插件

目前,我们的index.html 文件是存放在根目录下的.我们在发布项目的时候,发布的是dist文件夹中的内容,但是dist文件夹中如果没有index.html文件,那么打包的js等文件也就没有意义了.所以,我们需要将index.html 文件打包到dist文件夹中,这个时候就可以使用HtmlWebpackPlugin 插件.

HtmlWebpackPlugin 插件可以为我们做这些事情:

• 自动生成一个index.html 文件(可以指定模板来生成)
• 将打包的js文件,自动通过script标签插入到body中

3.2 使用插件

安装HtmlWebpackPlugin 插件
npm install html-webpack-plugin@3.2.0 --save-dev
修改webpack.config.js 文件中plugins部分的内容如下:

• 这里的template表示根据什么模板来生成index.html
• 需要删除之前在output中添加的publicPath属性
• 否则插入script标签中的src可能会有问题
  

  

四、 js压缩的Plugin

在项目发布之前,我们需要对js等文件进行压缩处理; 这里,我们就对打包的js文件进行压缩,我们使用一个第三方的插件uglifyjs-webpack-plugin,并且版本号指定为1.1.1 ,和 CLI2 保持一致
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
修改webpack.config.js文件,引用并使用插件

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
...
 plugins: [
      new webpack.BannerPlugin('最终版权归Liu所有'),
      new htmlWebpackPlugin({
        template: 'index.html'
      }),
      new UglifyjsWebpackPlugin()
  ]

生成压缩版的build.js文件格式:

五、搭建本地服务器

在开发测试的时候,我们每次修改代码进行测试,都会需要进行打包然后再进行测试; webpack提供了一个可选的本地开发服务器,这个本地服务器基于node.js搭建,内部使用express框架,可以实现我们想要的让浏览器自动刷新显示我们修改后的结果.
不过它是一个单独的模块,在webpack中使用之前需要先安装它
npm install --save-dev webpack-dev-server@2.9.1
在webpack.config.js文件进行配置;
devServer 也是作为webpack中的一个选项,选项本身可以设置如下属性:

• contentBase: 为哪一个文件夹S提供本地服务,默认是根文件夹,我们这里需写 ./dist
• port: 端口号
• inline: true 为页面实时刷新
• historyApiFallback: 在SPA页面中,依赖HTML5的history 模式

配置如图

在控制台执行命令: npm run dev

如果不需要点击网站就可以自动访问的话,需要在package.json中修改配置如下:

 "dev": "webpack-dev-server --open"

当我们main.js中修改时,就会自动刷新修改,不需要在打包了

document.writeln(`<h3>我是新加的</h3>`);

浏览器自动刷新修改如下图:

六、 webpack的配置分离

对于webpack.config.js进行分离,为什么要进行分离?因为在配置中有开发时依赖,生产时依赖还有公共依赖,这样再一起就造成了混乱,代码可读性变差.

6.1 准备工作

在项目中创建一个build目录,依次新建三个js文件;base.config.js , prod.config.js , dev.config.js 文件,如下所示

6.2 安装webpack合并插件

npm install webpack-merge --save-dev
安装后遇到的问题

TypeError: webpackMerge is not a function

指定一个低的版本就可以了
npm install webpack-merge@4.1.5 --save-dev

在prod.config.js中配置如下

// 生产时依赖
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
const webpackMerge = require('webpack-merge');
const baseConfig = require('./base.config');

module.exports = webpackMerge(baseConfig,{
    plugins: [
        new UglifyjsWebpackPlugin()
    ]
});

在dev.config.js中配置如下

// 开发时依赖
const webpackMerge = require('webpack-merge');
const baseConfig = require('./base.config');

module.exports = webpackMerge(baseConfig,{
    devServer: {
        contentBase: './dist',
        inline: true
    }
});

6.3 执行遇到的问题

**问题一:**当执行打包命令的时候

No configuration file found and no output filename configured via CLI option.
A configuration file could be named ‘webpack.config.js’ in the current directory.
Use --help to display the CLI options.

原因是在我们分离完配置后删除webpack.config.js 文件,系统找不到名为此文件的配置;解决方法是给命令指定执行时的路径:

然后重新打包即可
问题二: 当重新打包后发现,我们原有的dist文件下没有文件,重新生成的文件在build目录下,如图所示;

解决方法给打包文件修改指定路径:

原文地址：https://blog.csdn.net/weixin_47081743/article/details/110926821