webpack 浅析二

webpack

简单笔记

定义

1. 前端项目模块打包器
2. 生成依赖关系
   html
   css
   js
   图片（资源）
3. 自动化
   压缩
   …

核心概念

• 入口 entry

• 出口 output
  filename 文件名称
  path 文件路径

• 加载器 loader
  test处理哪些文件
  use使用哪些loader加载器
  让webpack拥有处理打包非js文件的能力

• 插件 plugin

  使用步骤:

1. 安装
2. require导入
3. new 实例化

• 让webpack 在打包运行过程中，额外处理内容的能力
  压缩
  优化
  html模板生成
• mode 模式
  production 产品模式
  develoment 开发模式

基础配置文件

webpack.config.js

- 	const path = require('path');  //导入path模块
module.exports={
	//打包的入口
    entry:'./src/index.js',
	//输出
    output:{
        filename:'main.js', //输出的文件名
        path:path.resolve(__dirname,'dist') //输出的文件夹
	},
}

命令运行

1。npx webpack
2. npm run start
	script:{"start":"webpack"}
-------package.json中

loader

1. css
   1. css-loader 加载css
      style-loader
   2. stylebiao标签加载css
   3. minCssExtractPlugin.loader
      把css抽出为单独的css文件
2. less
   （less）编译文件
   less-loader加载less文件

plugin

• html-webpack-plugin 处理HTML模板

  1. title标题
     <%= htmlWebpackPlugin.option.title%>
  2. minify：true 压缩
  3. template 地址

• mini-css-extract-plugin
  css提取插件

  1. new minCssExtractPlugin({
     filename:‘style.css’
     })
  2. html-webpack-plugin
     处理HTML模板
     title标题
     <%= htmlWebpackPlugin.option.title%>
     minify：true
     压缩
     template
     地址

• 优化css
  const optimizeCssAssetsWebpackPlugin = require(‘optimize-css-assets-webpack-plugin’)

	optimization:{
	minimizer:[new optimizeCssAssetsWebpackPlugin()],
	// 压缩器
},

webpack -dev-server

本地服务器

• 配置 DevServer
  host 域名
  port 端口
  hot 热更新
  open 打开浏览器
  proxy 代理
• 运行
  “serve”: “webpack-dev-server”

详细请看官网：webpack官网