webapck简单的打包整合

最新推荐文章于 2024-07-28 00:56:04 发布

面条请不要欺负汉堡

最新推荐文章于 2024-07-28 00:56:04 发布

阅读量328

点赞数 1

分类专栏： Webpack 文章标签： webpack webpack打包

本文链接：https://blog.csdn.net/gao_xu_520/article/details/110946638

版权

Webpack 专栏收录该内容

9 篇文章 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

二.插件补充

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 文件

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 插件是 webpack4+ 版本的，可以直接安装使用。这里只能把所有样式包括css、less都打包到一个css文件 common.css中，然后再 link 进页面。

安装mini-css-extract-plugin

创建css

配置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

五. 打包HTML

src文件

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']
        })
    ],
};

最后打包成