阶段六-webpack操作命令

一、webpack

    模块化打包工具
复制代码

二、安装webpack

2.1 先全局安装
	cnpm install webpack -g
	cnpm install webpack-cli -g

2.2 测试版本
	webpack -v
	webpack-cli -v
复制代码

三、简单用一下webpack

webpack==》本身之前是打包js

	如果要打包：html 、css ... 需要借助一些东西

1. 进入项目目录，随便创建一个js文件

	src/index.js

2. 在该目录中下载webpack

	cnpm install webpack -S

3. 在终端执行:webpack命名就会打包成功
复制代码

四、入口

默认：src/index.js
复制代码

五、出口

默认：dist/main.js
复制代码

六、多文件打包成一个文件

问题：多个入口文件 ===》 单文件出口
解决：entry: ['./src/a.js','./src/b.js']
复制代码

七、多文件打包成多文件

问题：多个入口文件 ===》 多文件出口
解决：entry: {
	  	a:'./src/a.js',
	  	b:'./src/b.js'
 	},
复制代码

八、loader是什么

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
复制代码

九、loader的配置

写法：
	module: {
	    rules: [{ 
	    	test: /\.css$/, 
	    	use: ['style-loader','css-loader']
		}]
	}

1、test 属性，识别出哪些文件会被转换。

2、use 属性，定义出在进行转换时，应该使用哪个 loader。

****一定要记住下载loader
复制代码

插件：html-webpack-plugin

***参考网站：https://www.cnblogs.com/wonyun/p/6030090.html
复制代码

使用步骤：

1. 下载

	cnpm install html-webpack-plugin -S

2. 引入

	var HtmlWebpackPlugin = require('html-webpack-plugin');

3. 配置

	plugins: [
        new HtmlWebpackPlugin()
    ]

4. 参数说明

	4.1 指定模版页面

		template:'./src/index.html'

	4.2 修改默认输出文件名

		filename:'xx.html'

	4.3 允许插入到模板中的一些chunk

		chunks:['jquery','xx']

	4.4 配置不允许注入的thunk

		excludeChunks:['xx']

5. 多页面打包

	需要创建多个new HtmlWebpackPlugin
复制代码

十、加载图片的loader ==> file-loader

{
    test: /\.(png|jpg|jpeg|gif)$/, 
    use: [{
        loader:'file-loader',
        options:{
          esModule:false,
          outputPath:'img/'
        }
    }]
}
复制代码

十一、让html支持图片的loader ==> html-withimg-loader

{
    test: /\.html$/, 
    use: 'html-withimg-loader'
}	
复制代码

添加字体图标：

{
    test: /\.(eot|svg|ttf|woff|woff2)$/, 
    use: 'file-loader?name=./fonts/[name].[ext]'
}
复制代码

压缩打包css

1. 单独抽离css文件

	1.1 下载插件： mini-css-extract-plugin

	1.2 引入插件：

		var MiniCssExtractPlugin = require('mini-css-extract-plugin');

	1.3 修改loader：

		{ 
	    	test: /\.css$/, 
	    	use: [MiniCssExtractPlugin.loader,'css-loader']
		}
	1.4 使用插件

		plugins:[
			new MiniCssExtractPlugin()
		]

2. 压缩css文件

	插件： optimize-css-assets-webpack-plugin
	
复制代码