webpack 零开始, 从0到1

 

1.  新建项目: webpack

2.  项目初始化: yarn init -y

3.  安装 webpack 依赖: yarn add webpack webpack-cli --dev

4.  在根目录下,新建配置 webpack 文件: webpack.config.js

5.  在根目录下,新建 src 文件夹,在 src 目录下新建 index.html , index.js , index.css

6.  先尝试一下打包: yarn webpack , ok 继续往下走

7.  安装一个插件: yarn add webpack-plugin-html --dev,打包 html 文件

8.  配置 const HtmLWebpackPlugin = require("webpack-plugin-html")

9.  pulgins:[

    new HtmlWebpackPlugin({

    template: './src/index.html',

    })

    ]

10. 终端运行:yarn webpack, dist 目录下 index.html 在浏览器打开

11. 使用插件,删除多余的文件: yarn add clean-webpack-plugin --dev

12. 使用 cleanwebpackPlugin 插件:

    const {CleanWebpackPlugin} =require("clean-webpack-plugin")

    plguins:[

    new CleanWebpackPlugin(),

    ]

13. 安装 css: yarn add css-loader --dev

14. 安裝 style: yarn add style-loader --dev

15. webpack.config.js 中配置:

    module.exports:{

    module:{

    rules:[

    {

    test: /\.css$/,

    use: ["style-loader", "css-loader"],

    },

    ]

    }

    }

16. 安装图片:yarn add url-loader file-loader --dev

    {

    test:/\.png$/,

    use:{

    loader:"url-loader",

    options: {

    limit: 10240, // 小于 10kb 字节的图片打包成 base 64 图片

    name:'images/[name].[hash:8].[ext]',

    }

    }  

    }

17. 安装语法转换(es6=>es5): yarn add babel-loader @babel/core @babel/preset-env --dev

    {

    test:/\.js$/,

    use:{

    loader:"babel-loader",

    options:{

    presets: ['@babel/preset-env']

    }

    }

    },

18. 安装 mini-css-extract-plugin: yarn add mini-css-extract-plugin --dev

    {

    test: /\.css$/,

    // use: ["style-loader", "css-loader"],

    use: [MiniCssExtractPlugin.loader, "css-loader"]

    }

    <!-- pulgins -->

 

    new MiniCssExtractPlugin({

    filename:"index.css",

    })

 

19. 热更新 webpack-dev-server, XMR 是 webpack 内部的:

    const webpack = require('webpack')

    devServer:{

    hot: true,

    compress: true

    },

 

      <!-- 注意 webpack=>5.0 webapc-cli=>4.0 的情况-->

      <!-- 输入框,见index.js,17-27行 -->

      <!-- package.json  -->

 

    "scripts": {

    "dev": "webpack serve --open"

    },

 

20. 打包静态文件: yran add copy-webpack-plugin --dev

    const CopyWebpackPlugin = require("copy-webpack-plugin")

    <!-- plugins -->

 

    new CopyWebpackPlugin({

    patterns:[{ from: 'public/**', to: '' }]

    })

 

21. 在不同环境下的配置文件: yarn add webpack-merge --dev

    新建三个文件:

    webpack.base.js : 公共文件

    webpack.dev.js : 开发环境

    webpack.pro.js : 生产环境

      <!-- package.json -->

    "scripts": {

    "serve":"webpack serve --config webpack.dev.js",

    "dev": " webpack serve --open ",

    "build": "webpack --config webpack.pro.js"

    },