webpack模块打包工具使用过程

 什么是webpack？

前端构建工具，与gulp和grunt 类似

作为打包工具，与browserify 类似

1.安装  ：

             初始化项目：npm init  -y
             安装：npm i webpack webpack-cli -D

2.配置文件 ：

              webpack.config.js
              module.exports = {}

3.核心：

统一在  webpack.config.js编写

(1)entry   入口 

单个entry   

module.exports={
    entry：'./src/index.js'
}

多个entry ，多个chunk

(2)output    出口

(3)plugin    插件

①在webpack 的运行过程中(运行过程（生命周期）)做一些额外操作
处理模板，清理

// 导入插件
const HtmlWebpackPlugin  = require('html-webpack-plugin');
// 导入css抽出压缩插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports={
plugins:[
		new HtmlWebpackPlugin({
			// 指定模板文件
			template:'./public/index.html'
		}),
		new MiniCssExtractPlugin({
			filename:"style-[contenthash:7].css"
		}),

	],
}

(4)loader    加载器

①webpack默认只能够处理js和json文件
②loader把非js文件转换为webpack可以处理的模块

module.exports = {
  module: {
    rules: [
      { 
        test: /\.txt$/, 
        use: 'raw-loader' 
      }
    ]
  }
};

(5)mode    模式

①production 产品
②development开发

(6)dev Server  本地服务器

①npm i webpack-dev-server -D    

②

module.exports={
   devServer:{
   open:true,//自动打开浏览器
   host:"localhost",域名
   port:8080 端口号
   hot:true  热更新
   }
}