2020-12-22

webpack

webpack官方文档，webpack是一个模块打包器（module bundler），它可以用loader和plugin来扩展。webpack本身结构精巧，基于tapable的插件架构，扩展性强，众多的loader或者plugin让webpack稍显复杂

webpack打包生成css、js文件，每次会对文件的内容做一个hash/md5，来生成文件名，因此文件内容更改相应的文件名也会改变。由于缓存是跟着文件名变的，让浏览器更新内容只需更改文件名，当浏览器发现用户电脑缓存的文件名与新文件名不一致时，会重新下载文件，达到实时更新的目的。

上面说到了缓存，这里我就来解释一下缓存：当用户首次访问一个URL，就会有一个HTTP缓存，缓存css、js之类的文件到用户硬盘/内存，用户再次访问浏览器就只需从硬盘/内存读取相应的内容，实现超快访问

webpack自带js转译功能（转译为低版本js）无需安装配置插件、loader

安装webpack

yarn init -y
yarn add webpack webpack-cli --dev

运行webpack

npx  webpack或
rm -rf dist && npx webpack

安装webpack-dev-server

webpack-dev-server作用：提供server方便开发预览，文件内容变化自动转译代码并刷新页面

yarn add webpack-dev-server  --dev
start //运行

loader（加载器）

因为 webpack 只能理解 JavaScript 和 JSON 文件，对于其他资源例如 css，图片，或者其他的语法集，比如 jsx， coffee，是没有办法加载的。 这就需要对应的loader将资源转化，加载进来。loader是用于加载的，它作用于一个个文件上。

常用loader：
file-loader（加载图片）、style-loader、css-loader、sass-loader（加载scss、依赖dart-sass）,stylus-loader、less-loader

module: {
        rules: [
            ...base.module.rules,
            {
                test: /\.css$/, //css-loader读所有以.css结尾的css文件到js
                use: ['style-loader', 'css-loader']
                //style-loader把css-loader读到的内容，转换成一个style标签放到header里面(js生成style)
            }
        ]
    }

plugin（插件）

plugin 用于扩展webpack的功能

它直接作用于 webpack，扩展了它的功能。当然loader也是变相的扩展了 webpack ，但是它只专注于转化文件（transform）这一个领域。而plugin的功能更加的丰富，而不仅局限于资源的加载。

常用plugin：
html-webpack-plugin：--webpack自动生成html文件
MiniCssExtractPlugin：--css代码单独提取文件

 plugins: [
        new HtmlWebpackPlugin({
            title: 'webpack-demo',
            template: 'src/assets/test.html'
        }),
    ]

module: {
        rules: [
            ...base.module.rules,
            {
                test: /\.css$/, //css-loader读所有以.css结尾的css文件到js
                use: [  //css抽成文件，再引入到html
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '/public/path/to/',
                        },
                    },
                    'css-loader',
                ],
            }
        ]
    }