webpack 浅析二

痛定思痛。 2022-12-10 03:47 157阅读 0赞

# 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官网][webpack]

[webpack]: https://www.webpackjs.com/concepts/