Vue05-webpackWebpack基础打包 webpack是一个静态的模块化打包工具，为现代的JavaScript

Webpack基础打包

webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序；

图片.png

浏览器不能直接识别TS、sass、cjs等，通过webpack打包可以让浏览器运行。

图片.png

使用webpack的前提

  安装Node（会自动顺带帮我们下载npm）

Webpack的安装

npm install webpack webpack-cli-g  全局安装
                               -D  局部安装

webpack的使用

浏览器是不能直接识别js、commonjs的语言的，需要webpack打包后，才能让浏览器识别

切换到对应路径 + webpack

会生成出一个dist文件夹，里面存在一个main.js文件

现在执行后，浏览器可以识别出js、commonjs代码；打包后的代码体积也变小了

webpack版本兼容的问题

全局安装会造成项目与webpack版本不兼容的问题

npm init --> 1.给包起名，然后一路回车，生成package.jsosn

注：如果用vue create的安装，不必这样

局部安装生产阶段依赖:npm install webpack webpack-cli
开发阶段依赖： -D

局部的命令：npx webpack  优先在node_modules下执行
或者：在package.json中，将scripts中的build:"webpack"
然后直接使用 npm run build即可

webpack打包时，会自动在src下面的index.js文件夹进行打包
如果指定入口： npx webpack --entry ./src/... 
    指定出口：            --output-path ./build

最高级的写法新建webpack.config.js

    node提供：
    获取导入的模块
    const path = require('path')
    
    module.exports = {
        entry:""  指定入口
        output:{
            path:...}
        指定出口并且是绝对路径,具体到c盘 
        如果这样的话就会太麻烦，所以我们使用node提供的一个办法
        __dirname:获取当前文件路径
            
            
            webpack执行后建了一个build文件夹存储打包后的数据
            path:path.resolve(__dirname,"./build") 
            
            打包后生成的文件的名字
            filename:"bundle.js"
        }
    }
    
    module.exports={
        entry:"",
        output:{
            path:path.resolve(__dirname,"./build") 
            filename:"bundle.js"
        }
    }

npm

如果有多个文件夹，在其中某一个文件里下载了很多npm

这时在其他文件里只需要 npm install 就可以将之前下载过的依赖再次下载

webpack补充

webpack默认对js进行打包，对css需要一个loader也就是css-loader

 1.下载css-loader：npm install css-loader —D开发阶段
 
 2.指定加载css的时候指定loader；
 2.1：内联
 ! 是用来分割这两个文件的
 import "css-loader!../css/style.css"

 2.2：配置
 在webpack.config.js中配置
 module.exports={
        entry:"",
        output:{
            path:path.resolve(__dirname,"./build") 
            filename:"bundle.js"
        },
        module:{
        匹配规则
            rules:[
                {
                    正则表达式
                    对所有以css结尾的，使用css-loader
                    因为正则里的 . 有歧义，需要转义字符 \.
                    test:/\.css$/,
                
                第一种    
                    loader:"css-loader"
                
                第二种完整写法，用到多个loader
                    use:[
                        {loader:"css-loader"}
                    ]
                },
            ]
        }
    }

style-loader

虽然上方可以加载css，但是css的样式没有生效，此时需要style-loader

安装:npm install style-loader -D

module:{
    rules:[
        {
            test:/\.css$/,  
            use:[
            先写style，有执行顺序
                "style-loader",
                "css-loader"
            ]
        },
    ]
}

处理less文件-->css

1.第一种方式

npm install less -D

npx:去node_modules下的bin下进行编译
npx lessc ./test.less demo.css
将test.less-->demo.css

2.修改配置文件

npm install less-loader -D
module:{
rules:[
    {
        test:/\.css$/,  
        use:[
        先写style，有执行顺序
            "style-loader",
            "css-loader"
        ]
    },
    {
    test:/\.less$/,
    use:[
        "style-loader",
        "css-loader",
        "less-loader"
    ]
    }
]
}

在package.json中把script中修改为build，每次运行此上用的命令

npm run build

认识PostCSS

用 JavaScript 工具和插件转换 CSS 代码的工具

npm install postcss postcss-cli -D 依赖插件：npm install autoprefixer -D

使用： --use 需要使用哪些插件 -o：输出到哪里后面是输入 npx postcss --use autoprefixer -o demo.css test.css

use:[
            "style-loader",
            "css-loader",
每次用postcss的时候都要再用一下auto插件            
            options:{
            postcssOptions:{
                plugins:[
                    require("autoprefixer")
                ]
            }
            }
    ]

为了在webpack中使用postcss 安装：npm install postcss-loader -D 使用：npm run build