WebPack4之打包css、image、js

最新推荐文章于 2022-09-08 14:23:58 发布

置顶 LonelyHobo

最新推荐文章于 2022-09-08 14:23:58 发布

阅读量531

点赞数 3

分类专栏： WebPack 文章标签： WebPack 打包

本文链接：https://blog.csdn.net/w1144646550/article/details/103201058

版权

WebPack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先需要webpack工具:

npm i webpack -s

然后就是打包图片用到的file-loader

npm i file-loader -s

最后就是打包css用到的css-loader(加载.css文件)、style-loader(使用<style>将css-loader内部样式注入到我们的HTML页面)

npm install style-loader css-loader -s

现在开始添加项目文件，一下是我自己的项目基本结构

首页，添加webpack.config.js文件，目录/build/webpack.config.js，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者通过 --config 选项来指定配置文件

const config = {
    mode: 'development',//mode：模式，development：开发模式。会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。
    entry: '../src/main.js',//入口文件 可以是多个，打包后对应多个文件
    output: {
        filename: '[name].js',//出口文件名称
        path: __dirname + '/../dist'//出口文件存放目录，无则自动创建
    },
    module: {
        rules: [ // 其中包含各种loader的使用规则
            {
                test: /\.css$/, // 正则表达式，表示打包.css后缀的文件
                use: ['style-loader', 'css-loader'], // 针对css文件使用的loader，注意有先后顺序，数组项越靠后越先执行
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                use: {
                    loader: "file-loader",
                    options: {
                        outputPath: '/static/images/',//输入文件目录
                        limit: 2048 //当图片大小超过2048个字节的时候，将打包的图片存在/static/images/文件夹中，否则直接改为base64格式放在mian.js中，可以减少http请求
                    }
                }
            }
        ]
    },
    watch: true // 监听文件改动并自动打包
};

module.exports = config;

然后添加main.js文件，目录/src/main.js，该文件是打包入口文件

let _merge = require('../static/js/index.js'); //引入js
let _jpg = require('../static/images/top.jpg'); //引入图片
let _css = require('../static/css/index.css'); //引入css

//渲染图片
document.getElementsByTagName('body')[0].innerHTML = `<img src="../dist${_jpg}" />`;

对应的静态文件

index.css

body{
    background-color: black;
    widows: 100vw;
    height: 100vh;
}
img{
    display: block;
    position: relative;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

top.jpg

index.js

console.log('这是打包后的代码');

最后添加一个index.html 在浏览器执行打包后的代码

<html>

<head data-n-head="">
    <title data-n-head="true">网站标题</title>
    <meta data-n-head="true" charset="utf-8">
    <meta data-n-head="true" name="viewport" content="width=device-width, initial-scale=1">
    <meta data-n-head="true" charset="utf-8">
    <meta data-n-head="true" name="keywords" content="网站搜索关键字">
    <meta data-n-head="true" data-hid="description" name="description" content="网站描述">
</head>

<body>

    <script src="../dist/main.js"></script>
</body>

</html>

打开控制台，到/build目录下执行 webpack，输出结果为：

在浏览器中打开/src/index.html文件，最终效果如下：

至此，一个简单的webpack打包流程已完成，希望对各位有所帮助。

你千万不要见怪，城市是一个几百万人一起孤独生活的地方。

——梭罗

LonelyHobo

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
WebPack4之打包css、image、js

首先需要webpack工具:npm i webpack -s然后就是打包图片用到的file-loadernpm i file-loader -s最后就是打包css用到的css-loader(加载.css文件)、style-loader(使用<style>将css-loader内部样式注入到我们的HTML页面)npm install style-loader c...
复制链接

扫一扫