webpack初入门（三）---插件的使用

学习下webpack的插件功能，下面有html产出、

要注意写命令是在正确的文件路径下呀！
一、html产出（就是让html文件自动生成在dist中，之前的html是自己新建并且将js关联进来的）

首先在webpack中找到【插件】

找到这个插件↓

接下来就是安装配置和使用了
安装的话复制官网上的安装命令，然后将npm改成cnpm

cnpm install --save-dev html-webpack-plugin

安装完成后，配置webpack.config.dev.js文件
这两句引入
这时的将之前生成dist文件删除，然后运行 npm run dev

生成一个 dist/index.html文件，该文件中还引入了生成的js，奈斯！
npm run start 回车
然后成功开启！

二、css抽离（就是将内联的css样式改成外联的css样式，link引进来那种！）

首先在官网上找到ExtractTextWebpackPlugin插件，接下来是安装配置，按照官方的文档来就行了！嗯，别这里用一点那里用一点！

装的webpack版本是4的，所以直接安装官网上的第一个就行

npm install --save-dev extract-text-webpack-plugin

在webpack.config.dev.js中配置

因为我是在webpack原有的基础上来增加这个的，所以写成这样↓
然后就 $ npm run start 运行！成功啦！上面按照官网的来生成的是style.css文件，
外联样式！！

按照这个来的话↓

    const ExtractTextWebapckPlugin= require("extract-text-webpack-plugin")
   //loader配置：
   use: ExtractTextWebapckPlugin.extract({
         use: 'css-loader'
       }) //不再需要style-loader

   //pulgin配置
   new ExtractTextWebapckPlugin('css/[name][hash:6].css')

这样会生成一个css文件夹！里面包含一个css文件

三、图片打包，类似图片打包添加进去

首先在src/asset/建立一个img文件，然后放入图片，然后开始安装file-loader 和url-loader，一开始我只装了file-loader，然后报错了！

	cnpm I url-loader file-loader -D

然后将图片在src/index.js中加入

	const img1 = require('./asset/img/1.jpg')
	const img2 = require('./asset/img/2.jpg')
	
	const  imgIns = new Image() 
	const  img2Ins = new Image()
	
	imgIns.src = img1.default 
	img2Ins.src = img2.default
	
	document.body.appendChild( imgIns )
	document.body.appendChild( img2Ins )

然后配置webpack.config.dev.js

	 //url-loader 存base64  file-loader存文件（woff mp3）
	    {
	        test:/\.(png|jpg|gif)/,
	        use:[{
	          loader: 'file-loader',
	          options: {
	                limit: 5000,//字节少于5000 ——》 base64  超过5000  file
	                outputPath: 'images/', //5000意思存到images
	          }
	        }]
	      }

然后运行，$ npm run start
base64图片可以减少ajax请求，展示时间短

浏览器中显示成功！嗯奈斯！

三、静态资源拷贝打包

像css和font这种文件是原封不动地复制到dist文件中地，所以这种文件的打包称为静态资源的拷贝打包

首先从font awesome下载font文件和css文件，然后放到public中

安装copywebpackplugins插件和安装配置

	cnpm install --save-dev copy-webpack-plugin

然后在webpack.config.dev.js中配置

	const CopyWebpackPlugin = require('copy-webpack-plugin');
	
	 plugins: [
	        new CopyWebpackPlugin([{
	            from: path.join(__dirname,'../public'),//这个文件从哪里来
	            to : path.join(__dirname,'../dist/static')//拷贝的文件放到哪里去，涉及到路径的全是用path.join
	        }])
	
	    ]

plugins中只需要两个参数，一个是from一个是to

配置好运行然后在dist中出现了static文件↓

四、错误资源定制

当我们某个单词写错时，在浏览器控制台中看到的是显示打包后代码的行数的错误，造成不准确

比如：
在 三、图片打包中 在index.js中写少一个2

然后运行，运行后发现打包看运行报错的位置是在哪里
显示是39行，但是我们39行并没有报错，报错显示的应该是在打包后生成的js文件中，并不是在原本的js文件中的，这时候只需要在webpack.config.dev.js中加入错误资源定制的语句

devtool: 'source-map'  

运行！

这时

插件使用的过程中经常会出错：原因1、单词写错，看看变量是否对应 2、安装插件是是否有有安装完整

问题：为什么需要在打包后文件名上加hash？

因为项目有不同版本，加上hash 6个数字标识就会形成不同的版本

目的：就是为了创建多个版本，便于版本切换

比如：
在webpack.config.dev.js文件中，
这时打包两次后

生成不同版本的打包文件，这时还可以加上时间戳来区分新老版本

这时生成的文件会有加上时间的版本，害 我觉得还能将时间转换下