初识Webpack

npm包管理器
webpack模块化的打包工具，打包前的文件转化需要配置loader/插件

0.模块加载器: // 任何一个文件都可以称作是一个模块
        有各种loader 好多插件
        支持CommonJs + AMD规范
1.前提：
        node 
2.npm install webpack webpack-cli -g // 全局安装
        webpack 是全局
        webpack-cli 是命令行执行文件时使用的
    npm install webpack webpack-cli // 局部安装 prod生产依赖 用户端也需要的
    npm install webpack webpack-cli -D // 局部安装 dev开发依赖
3.webpack -v
4.webpack init -y // 使用默认设置

1.webpack基础打包配置: 一定要检查下文件是否被正确转化

方法一：
前置条件：
1.要有 vue.config.js 
        "scripts":{ // 命令行运行的，node会去node_modules .bin下去找
                "build": webpack
        }
2.要有 src下有index.js  <-- 默认的打包入口文件   默认的出口文件 dist文件夹下
3.使用npm run build
另外要自定义打包入口文件，需要：
npm/npx webpack --entry ./src/main.js --output-path ./build
// 路径是以当前文件夹为基础
npx: 就是先去node-modules bin下找，找不到向上，都没有才会install

方法二：
1.创建 webpack.config.js
const path = require("path") // CommonJs的方式
module.export = {
        entry: "",
        output: {
                path: path.resolve(__dirname,  "./build")  // 必须绝对路径
                filename: 'bundle.js', // 默认出口文件名是main.js 
        }
}
// 改名：不叫webpack.config.js -> lt.config.js
// package.json => scripts => 
// "build": "webpack --config lt.config.js"

2.打包依据

根据文件间的依赖，没有被依赖，不会被打包进去

3.Webpack:
解析文件-loader/babel

1.webpack默认可以打包js ，json文件，其他文件需要安装loader

2.loader: 加载其他文件时，webpack不知道用啥方法加载它，需要安装loader
        .css文件：cnpm install css-loader -D
                css-loader 加载解析.css文件，不会将解析后的css插入页面
                style-loader 插入页面
        .less文件： cnpm install less -D  // 自带less compile         .less转化成.css
                                less-loader -> less 
                                命令行工具 -> 核心工具
                less less-loader
                npx lessc testOpt.css  demoIpt.css
        .postcss文件：1.cnpm install postcss postcss-cli -D // 添加浏览器前缀 -命令行操作
                                2.cnpm install autoprefixer --D // 需要联合使用
                                3.使用： npx posscss --use autoprefixer -o testOpt.css  demoIpt.css
                postcss-loader -> postcss -> plugins
                      命令行工具 -> 核心工具
                                4.现在不用autoprefixer了 用postcss-preset-env  自动添加polyfill
                                        postcss 依赖 postcss-preset-env插件                          module.exports = {plugins: [require("postcss-preset-env")],};
综上： postcss 添加浏览器前缀，需要：
        1.install postcss
        2.install postcss-preset-env
        3.新建postcss.config.js:
        module.exports = {plugins: [require("postcss-preset-env")],};

         .jpg webpack5 现在废弃file-loader(字体、图片)     
                                        废弃url-loader（小图转成base64,减少请求次数）
        .vue文件： vue-loader 解析 .vue文件中的template下的语法

3.babel: 解析es6转换成向后兼容的js
        @babel/preset-env // 集合包
        npx babel ./demo.js --out-filename/dir demoTr.js/dir --presets=@babel/env

4.打包后vue:
        // .runtime 运行版本不带解析器compile，不能解析createApp的template  体积小
        vue(.runtime).global(.prod).js // cnd方法引入，默认使用的vue版本
        vue(.runtime).esm-browser(prod).js // script type="module" 
        vue(.runtime).esm-bundles.js
        // webpack打包 默认使用vue.runtime.esm-bundles.js
        // 需要解析template，需要指定引入 vue.esm-bundles.js
        vue.cjs(.prod).js // node 中使用require方式引入
        -------------------VUE版本介绍---以上
        解析vue文件需要：
                vue-loader@next
                @vue/compile-sfc
                VueLoaderPlugin // vue-loader内的一个插件
                DefinePlugin() // 消除tree-shaking 提示 定义编译时的全局变量-baseUrl
        
        

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundleB.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },
    ],
  },
};

4.Webpack:
plugins

1.clean-webpack-plugin
2.html-webpack-plugin // 生成index.html
        defindPlugin // index.html 中的变量
3.copy-webpack-plugin // 复制文件到 某个文件夹中

5.Webpack:
devServer: 

一.自动打包：
1.原由： 每次改源码，都需要重新build一遍，可以自动编译
2.方法：
        法一："scripts": "webpack --watch"
        法二：watch: true
        法三：cnpm install webpack-dev-server -D

二.模块-热替换： hot -> module replacement - HMR 无需重新加载页面
                                // (设置hot:true，页面不会重新加载 target: 'web/node' )
            -热加载： live reloading (webpack 默认启动，页面会重新加载)

三.设置host:
1.localhost: 回环地址，自己发包，自己直接接收，不会抛到网络层，用ip访问不了
2.0.0.0.0： 别人可以用ip来访问
3.proxy: 本地express静态资源服务器 请求 接口服务器，就不存在跨域

四.模块解析：resolve
1.resolve: {
        extensions: [".js",".json",".vue"] // .vue文件不用写后缀了
    }
2.分离环境：
        "scripts": {
                "build": "webpack --config ./....."
                "serve": "webpack serve --config ./...."
        } 
        copy一份webpack.config.js 分离为
                webpack.common.config.js
                webpack.dev.config.js
                webpack.prod.config.js
        cnpm install webpack-merge
        const { merge } = require("webpack-merge")
        const Common = require("./webpack.common.config.js")
        module.export = merge(Common, {
                ...............
        })

这三个插件的路径是从跟路径开始找的，不用改路径
cleanWebpackPlugin
HtmlWebpackPlugin
contentBase
entry

6.cli

command-line-interface
vue -V // vue/cli版本
vue 版本 // package.json 下vue
1.cnpm run serve过程：
        导入weback 编译后给server server监听