webapck简单的打包整合

Bertha 。 2021-09-03 06:30 375阅读 0赞

# 一. DevServer 是webpack开发服务器 #

（1）.webpack-dev-server 主要提供两个功能：

1.为静态文件提供web服务

2.自动刷新和热替换(HMR)

自动刷新指当修改代码时webpack会进行自动编译，更新网页内容。热替换指运行时更新各种模块，即局部刷新

（2）使用

1.安装webpack-dev-server

命令为npm install --save-dev webpack-dev-server

2.配置webpack.config.js文件

devServer: \{

contentBase: path.join(\_\_dirname, "demo"),// 设置服务器访问的基本目录

compress: true,

host:"localhost',//服务器的ip地址

open:true,

port: 9000

3.配置package.json文件

"scripts": \{

"dev": "webpack-dev-server --mode development"

\},

4.dome 文件 创建index.html

打包的js 反正dome 文件下，之间引用就好

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    
    <body>
        webpck 打包运行
        <script src="./tests.js?111"></script>
    </body>
    
    </html>

5. npm run dev

![20201210094913190.png][]

# 二.插件补充 #

1. clean-webpack-plugin 每次构建前清理dist文件(不是把dist 文件都清空，而是删除打包的那个文件)

npm i clean-webpack-plugin --save-dev

const { CleanWebpackPlugin} = require('clean-webpack-plugin');
    
    
    plugins:[
        new CleanWebpackPlugin()
    ]

2. 生成HTML  html-webpack-plugin

npm i html-webpack-plugin --save-dev

# 三.打包Js #

module.exports = {
        mode: "development",
        // JS 执行入口文件
        entry: [
            'babel-polyfill', __dirname + '/src/js/YlzMPS.js',
            __dirname + '/src/js/YlzReadCard.js',
        ],
        output: {
            // 把所有依赖的模块合并输出到一个 ylzDll.js 文件
            filename: "ylzDll.js", // 用于长效缓存
            // 输出文件都放到 dist 目录下
            path: path.join(__dirname, 'dist')
        },
        module: {
            rules: [
            ]
        },
        plugins: [
    
        ],
    };

# 四.css 打包 #

安装css-loader style-loader

(1).打包成js

A. 创新css 文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70][]

B. 配置webapck

module.exports = {
        mode: "development",
        // JS 执行入口文件
        entry: [
            __dirname + '/src/css/index.js',
        ],
        output: {
            // 把所有依赖的模块合并输出到一个 bundle.js 文件
            filename: "tests.js", // 用于长效缓存 
            // 输出文件都放到 dist 目录下
            path: path.join(__dirname, 'demo')
        },
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: [
                        { loader: 'style-loader' },
                        {
                            loader: 'css-loader',
                            options: {
                                modules: true
                            }
                        }
                    ]
                }
            ]
        },
        plugins: [
    
        ],
        devServer: {
            contentBase: path.join(__dirname, "demo"),// 设置服务器访问的基本目录
            compress: true,
            host: "localhost",//服务器的ip地址
            open: true,
            port: 9000
        }
    };

（2）打包成css文件

CSS样式抽离之 [mini-css-extract-plugin 插件][mini-css-extract-plugin]  
mini-css-extract-plugin 插件是 webpack4+ 版本的，可以直接安装使用。这里只能把所有样式包括css、less都打包到一个css文件 common.css中，然后再 link 进页面。

安装mini-css-extract-plugin

创建css

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 1][]

配置webpack

module.exports = {
        mode: "development",
        // JS 执行入口文件
        entry: [
            __dirname + '/src/css/index.js',
        ],
        output: {
            // 把所有依赖的模块合并输出到一个 bundle.js 文件
            filename: "testss.js", // 用于长效缓存 
            // 输出文件都放到 dist 目录下
            path: path.join(__dirname, 'demo')
        },
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        { loader: "css-loader" }
                    ]
                },
                {
                    test: /\.less$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        { loader: "css-loader" },
                        { loader: "less-loader" }
                    ]
                }
            ]
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: "css/common.css"
            }),
        ],
        devServer: {
            contentBase: path.join(__dirname, "demo"),// 设置服务器访问的基本目录
            compress: true,
            host: "localhost",//服务器的ip地址
            open: true,
            port: 9440
        }
    };

运行，就可以看到demo 多了一个css/common.css

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 2][]

# 五. 打包HTML #

src文件

![20210114172950709.png][]

webpack.config.js 配置

const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    module.exports = {
        mode: "development",
        // JS 执行入口文件
        entry: {
            index: './src/js/index.js',
            about: './src/js/about.js',
        },
        // 出口配置
        output: {
            // 把所有依赖的模块合并输出到一个 bundle.js 文件
            filename: "[name].[contenthash:7].js", // 用于长效缓存
            //非入口chunk文件（比如动态加载的文件）名
            chunkFilename: '[id].[chunkhash:7].js',
            // 输出文件都放到 dist 目录下
            path: path.join(__dirname, 'dist')
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './src/html/index.html', // 模板路径 要打包的文件
                filename: 'home.html',//生成的文件名
                // script 标签生成 ，位于哪个地方
                // true 默认 body里， body :body里，head:head里，
                inject: true,
                // 静态资源带hash
                hash: true,
                // 对生成的HTML 文件进行压缩
                minify: {
                    //压缩HTML的js
                    minifyJS: true,
                    //压缩HTML的css
                    minifyCSS: true,
                    // 删除HTML的注释
                    removeComments: true,
                    // 去除标签属性的引号
                    removeAttributeQuotes: false,
                    // 删除空值属性
                    removeEmptyAttributes: true,
                    //省略布尔值的属性值
                    collapseBooleanAttributes: true,
                    // 移除type='text/JavaScript' 其他类型属性值保持不变
                    removeScriptTypeAttributes: true,
                    // 移除type='text/css' 其他类型属性值保持不变
                    removeStyleLinkTypeAttributes: true,
                    //不要在display：inline的元素之间留下任何空格
                    //必须与 collapseWhitespace 一起用
                    collapseInlineTagWhitespace: true,
                    collapseWhitespace: true
                },
                //主要用于多页面 ，当你有多个入口文件
                // 那就会编译后生成多个打包后的文件
                // 那么chunks 就你选择你要使用的哪些js文件
                // 这些文件会自动添加到生的HTML中
                // chunks: ['index']
            })
        ],
    };

最后打包成

![20210114173248516.png][]

![20210114173758923.png][]

# 六 配置注意 #

1. filename: "test.\[chunkhash\].js",  时间戳

七.学习案例

[git 地址][git]

[20201210094913190.png]: /images/20210813/7af6867bf0604bc7b0a67d8f930f4001.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70]: /images/20210813/127d639d22b24b428032bd5d08efb0cb.png
[mini-css-extract-plugin]: https://www.npmjs.com/package/mini-css-extract-plugin
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 1]: /images/20210813/b2be6f3a07a34df29d53ce74e4befa0b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 2]: /images/20210813/3b35d87df40b4f6797f02bf447af7044.png
[20210114172950709.png]: /images/20210813/b963936120514c0b96e4110f4e90e93c.png
[20210114173248516.png]: /images/20210813/50bb9d03609241fdba8141b9b8ef2cd2.png
[20210114173758923.png]: /images/20210813/f43b68a1108f4d2a8aceccb5f88ddaf7.png
[git]: https://gitee.com/Xbaiss/webapck_dome/tree/master