plugin的使用

一.  认识plugin

1. plugin是什么?
        plugin是插件的意思，通常是用于对某个现有的架构进行扩展
        webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等.
2. loader和plugin区别

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

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

3. plugin的使用过程:
        步骤一:通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)

        步骤二:在webpack.config.js中的plugins中配置插件。

二.  添加版权的Plugin

        BannerPlugin：最简单的插件，为打包的文件添加版权声明，属于webpack自带的插件。

1. 按照下面的方式来修改webpack.config.js的文件:

// 导入path包，依赖node相关包
const path = require('path')
// 导入webpack
const webpack = require('webpack')

module.exports = {
    ...
    plugins:[
        new webpack.BannerPlugin(!最终版权归fullmoon所有')
    ]
}

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

三.  打包html的plugin

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

2. HtmIWebpackPlugin插件可以为我们做这些事情:
        自动生成一个index.html文件(可以指定模板来生成)

        将打包的js文件，自动通过script标签插入到body中

3. 安装HtmIWebpackPlugin插件     

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

4. 使用插件，修改webpack.config.js文件中plugins部分的内容如下:

        这里的template表示根据什么模板来生成index.html

plugins: [
		new webpack.BannerPlugin('最终版权归fullmoon所有'),
		new HtmlwebpackPlugin({
			template:'index.html'
		})
	]

        另外，我们需要删除之前在output中添加的publicPath属性，否则插入的script标签中的src可能会有问题

四.  js压缩的Plugin

        开发时不建议使用

1. 在项目发布之前，我们必然需要对js等文件进行压缩处理
        这里，我们就对打包的is文件进行压缩。我们使用一个第三方的插件uglifyjs-webpack-plugin，并且版本号指定1.1.1，和CLI2保持一致

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

2. 修改webpack.configjs文件，使用插件:

const path = require('path' )
const webpack = require('webpack')
const uglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
    ...
    plugins:[new webpack.BannerPlugin("最终版权归coderwhy所有')
    new uglifyJsPlugin()
    ]
}

3. 查看打包后的bunlde.js文件，是已经被压缩过了。

五.  搭建本地服务器

1. webpack提供了一个可选的本地开发服务器，这个本地服务器基于node,js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。
2. 安装

        不过它是一个单独的模块，在webBack中使用之前需要先安装它

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

3.devserver也是作为webpack中的一个选项，选项本身可以设置如下属性:
        contentBase:为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
        port:端口号（默认8080端口）
        inline:页面实时刷新
        historyApiFallback:在SPA页面中，依赖HTML5的history模式

4. webpack.configjs文件配置修改如下:

	devServer:{
		contentBase:'./dist',
		inline:true
	}

5. 我们可以再配置另外一个scripts :

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

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

六.  webpack配置文件的分离

开发环境，生产环境：部署到服务器的正式版本。

1. 生产相关配置和开发相关配置进行分离，将公共抽离出来：

        创建build文件夹用来分离配置文件，base.config.js公共配置，dev.config.js开发时环境，prod.config.js生产环境.

2. 安装webpack-merge

npm install webpack-merge@4.1.5 --save-dev

3. 配置文件

(1) dev.config.js

const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

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

(2) 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()
	]
})

(3) 在脚本修改配置加文件名，指定要用哪一个配置文件  

(4) 修改base.config.js配置文件打包的路径

4. 执行 npm run dev 直接打开浏览器

5. base.config.js公共配置

// 导入path包，依赖node相关包
const path = require('path')
// 导入webpack
const webpack = require('webpack')
const HtmlwebpackPlugin = require('html-webpack-plugin')
const UglifyjswebpackPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
	// 入口：可以是字符串/数组/对象，这里我们入口只有一个，所以写一个字符串即可
	entry:'./src/main.js',
	// 出口：通常是一个对象，里面至少包含两个重要属性，path 和 filename
	output:{
		// 动态获取路径,path通常是一个绝对路径
		path: path.resolve(__dirname,'../dist'),
		filename:'bundle.js',
		// publicPath:'dist/'
	},
	module: {
	    rules: [
			{
				test: /\.css$/i,
				// css-loader只负责将css文件进行加载
				// style-loader负责将样式添加到DOM中
				// 使用多个loader时，是从右向左
				use: [ "style-loader","css-loader"],
			},
			{
			    test: /\.less$/i,
			    use: [
				// compiles Less to CSS
					'style-loader',
					'css-loader',
					'less-loader',
			    ],
			},
			{
			    test: /\.(png|jpg|gif)$/i,
			    use: [
					{
		            loader: 'url-loader',
		            options: {			              
						limit: 20000
			        }
		        }
		        ]
			},
			{
				test: /\.vue$/,
				use: ['vue-loader']
			}
	    ]
	},
	resolve:{
		// alias 别名
		alias:{
			'vue$':'vue/dist/vue.esm.js'
		}
	},
	plugins: [
		new webpack.BannerPlugin('最终版权归fullmoon所有'),
		new HtmlwebpackPlugin({
			template:'index.html'
		})
	]
}