10-webpack之plugin

1、关于plugin

什么是 plugin

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

loader 和 plugin 区别

• loader 主要用于转换某些类型的模块，它是一个转换器
• plugin 是插件，它是对 webpack 本身的扩展，是一个扩展器

plugin 的使用过程

1. 通过 npm 安装需要使用的 plugins (某些 webpack 已经内置的插件不需要安装)
2. 在 webpack.config.js 中的 plugins 中配置插件

2、添加版权的plugin：BannerPlugin

BannerPlugin 属于 webpack 自带的插件，可以为打包的文件添加版权声明

修改 webpack.config.js 的文件：

重新打包程序，查看 bundle.js 文件的头部，可以看到如下信息：

3、打包html的plugin：HtmlWebpackPlugin

目前，我们的 index.html 文件是存放在项目的根目录下的，但在真实发布项目时，发布的是 dist 文件夹中的内容，

而 dist 文件夹中如果没有 index.html 文件，那么打包的 js 等文件也就没有意义了；

所以，我们需要将 index.html 文件打包到 dist 文件夹中，这个时候可以使用 HtmlWebpackPlugin 插件；

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

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

安装 HtmlWebpackPlugin 插件:

npm install html-webpack-plugin@3.2.0 --save-dev

修改 webpack.config.js 文件中 plugins：

需要删除(注释)之前在 output 中添加的 publicPath 属性 ：

修改模板 index.html

上面的 template 表示根据什么模板来生成 index.html，这里表示的是和 webpack.config.js 在同一目录的 index.html，由于 HtmlWebpackPlugin 插件会将打包的 js 文件，

自动通过 script 标签插入到 body 中，所以我们要去掉模板 index.html 中的多余部分:

重新打包执行，会发现 dist 目录中多了一个 index.html 文件：

4、js压缩的Plugin：uglifyjs-webpack-plugin

在项目发布之前，我们必然需要对 js 等文件进行压缩处理，

对打包的js文件进行压缩，可以使用一个第三方的插件 uglifyjs-webpack-plugin，并且版本号指定 1.1.1，和 CLI2 保持一致，

安装 uglifyjs-webpack-plugin：

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

配置：

重新打包后，查看bundle.js，已经被压缩了：

5、搭建本地服务器

webpack 提供了一个可选的本地开发服务器，这个本地服务器基于 node.js 搭建，内部使用 express 框架，可以实现让浏览器自动刷新

显示我们修改后的结果，不过它是一个单独的模块，在webpack中使用之前需要先安装它；

安装 webpack-dev-serve：

npm install --save-dev webpack-dev-server@2.9.1

webpack.config.js 文件配置修改，：

devserver 也是作为 webpack 中的一个选项，选项本身可以设置如下属性：

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

此时，可以通过命令：webpack-dev-server 启动服务器了

配置 package.json 中的 scripts，简化启动服务器的命：

如果写为：  "dev": "webpack-dev-server –open"

--open参数表示直接用默认浏览器打开

执行命令 nmp run dev 启动服务器, 在浏览器中打开相应的URL即可：

搭建本地服务器用于开发阶段调试；

6、webpack配置分离

由于我们目前所有的生产环境代码和发布环境代码都写在 webpack.config.json 中，这样当我们在编译的时候，

会将生产环境代码和发布环境代码一起编译，但有时候我们希望将二者分开编译；

这时候，将生产环境代码和发布环境代码抽离出来显得很有必要

新建一个文件夹 build，在 build 中新建三个文件：

base.config.js：公共部分配置

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

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    // publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        test: /.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时, 是从右向左
        use: ['style-loader', 'css-loader']
      },
      {
        test: /.less$/,
        use: [{
          loader: "style-loader", // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader", // compiles Less to CSS
        }]
      },
      {
        test: /.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 当加载的图片, 小于limit时, 会将图片编译成base64字符串形式.
              // 当加载的图片, 大于limit时, 需要使用file-loader模块进行加载.
              limit: 13000,
              name: 'img/[name].[hash:8].[ext]'
            },
          }
        ]
      },
      {
        test: /.js$/,
        // exclude: 排除
        // include: 包含
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.css', '.vue'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  plugins: [
    new webpack.BannerPlugin('最终版权归ming所有！'),
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
  ],
}

dev.config.js：开发部分配置

module.exports = {
  devServer: {
    contentBase: './dist',  //服务监听的文件夹
    inline: true, //是否自动刷新
    port: 8888
  }
}

prod.config.js：生产部分配置

const UglifyjswebpackPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  plugins: [
    new UglifyjswebpackPlugin(),
  ],
}

安装对配置文件合并的插件：webpack-merge

npm install webpack-merge --save-dev

修改配置文件，添加合并配置：

dev.config.js

prod.config.js

修改 package.json 文件，指定配置文件

在 base.config.js 中的 output 中的文件拼接路径是 'dist'，表示的是从当前路径下拼接，也就是built/dist ，

所以要改为../dist，不然打包的文件就会在built/dist 中了；

此时可以执行npm run build 或者npm run dev测试；