参考官网菜鸟等、对webpack知识的记录、以及webpack5新特性理解

webpack打包完后只有一个入口函数 如像图片打包完后 会成base64的一种格式 就是描述图片的很长的数据，安装webpack需要依赖node.js
优点：是减少http请求 ，减少js文件之间的依赖，可以处理浏览器不认识的 如less scss es6 （webpack只能认识一部分es6）

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
  mode: 'production',//通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {//“嘿，webpack 编译器，当你碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时，在你对它打包之前，先 use(使用) raw-loader 转换一下。”
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [//在上面的示例中，html-webpack-plugin 为应用程序生成一个 HTML 文件，并自动注入所有生成的 bundle。
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

通过loader可以使得webpack可以识别多种语言以及预处理器语法编写的模块，描述了如何处理非原生模块，以及将相关依赖引入到你的bundle中

1、使用不同配置文件
通过在scripts中添加 --config dev.config.js --config prod.config.js

"scripts": {
  "build": "webpack --config prod.config.js"
}

2、path配置
path.resolve();
将路径或者路径段解析 返回绝对路径

path.resolve('_dirname', '/src')  return /src
path.resolve('_dirname', './src')  return 项目路径/src

path.dirname()返回项目的目录名称 当接受参数为_filename时作用与——dirname类似

console.log(__dirname);
// Prints: /Users/mjr
console.log(path.dirname(__filename));
// Prints: /Users/mjr

Path.join()
用于使用平台特定的分隔符把给定的path连接到一起，生成规范化的路径
join与resolve的区别

1、join是把各个path片段连接在一起， resolve把‘／’当成根目录

path.join('/a', '/b') // Outputs '/a/b'
path.resolve('/a', '/b') // Outputs '/b'

2、join直接拼接字段，resolve解析路径并返回
path.join("a", "b1", "..", "b2")
console打印会得到"a/b2"
path.resolve("a", "b1", "..", "b2")
console打印得到"/home/myself/node/a/b2"

3、
_filename 当前模块的文件名
_dirname 当前模块的目录名称

console.log(__filename);
// Prints: /Users/mjr/example.js
console.log(__dirname);
// Prints: /Users/mjr

4、入口文件与出口文件

output.path
默认值process.cwd()
指示输出的目录，对应一个绝对路径
output.publicPath
默认值空字符串
webpack-dev-server打包的内容是放在内存中的，打包后的资源对外的根目录就是publicpath
// 假设devServer的publicPath为 
const publicPath = '/dist/' 
// 则启动devServer后index.html的位置为 
const htmlPath = `${pablicPath}index.html` 
// 包的位置 
cosnt mainJsPath = `${pablicPath}main.js`

5、package.json

main: 'index.js'  发布文件所需
privat： true   防发布
script中可以布置命令，webpack是用来打包的命令

6、module模块
中的每个loader会链式调用，对资源进行转换，转换完后的资源会传给下个loader，最后拿到webpack期望返回的javascript

配置rules属性，每一个元素位都代表一个loader配置
rules： [
    {
        test: '/\.css$/i',
        use: [style-loader , css-loader]
    }
]
styleloader应该遵循顺序，先style在css

7、plugins

const htmlwebpackplugin = require('htmlwebpackplugin')
https://github.com/jantimon/html-webpack-plugin
// 每次构建都会自己生成index.html替换原有文件
pligins:[
    mew htmlwebpackpluagin({
        title:'管理输出'
    })
]

8、源地图

devtool : inline-source-map

9、选择一个开发工具

在script中加入
"watch": "webpack --watch",

10、devserver

devServer: {
  contentBase: './dist',
},
此行代码意味着把dist目录下的文件服务到locasthost：8080
在script加入
"start": "webpack serve --open",

随时补充所学~
Let yourself gradually excellent