webpack打包图片，样式等静态资源文件

瑞晟技术服务中心-耿瑞

已于 2022-01-30 14:40:37 修改

阅读量1.2k

点赞数 2

文章标签： webpack 前端 javascript

于 2022-01-27 11:45:01 首次发布

本文链接：https://blog.csdn.net/weixin_45966674/article/details/122712351

版权

其实前面的都不足以展示出webpack在众打包工具中的优势
webpack的优势在于可以打包大规模项目文件以及静态资源文件
这才是webpack独有的优势
首先我们来创建一个webpack项目
找一个文件夹在终端中输入

npm init

根据提示操作就会生成一个package.json

将webpack引入进来

npm install webpack webpack-cli --save-dev

然后在终端输入

npm install html-webpack-plugin --save

再在终端输入

npm install webpack-dev-server --save

打开package.json 给 scripts 添加上
“build”: “webpack-dev-server”,
“webpack”: “webpack”
两个配置
在这里插入图片描述
在根目录建立src文件夹
在src下创建一个assets文件夹
里面放一个css文件和一个图片

和我同名就可以直接复制代码了之后可以看明白在改名
carnival.png

index.css


* {
  color: red;
}

在src下创建index.html
index.html参考代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id = "text"></div>
</body>
</html>

在src下创建output.js
output.js参考代码如下

import carnival from "./assets/carnival.png"
import indexcss from "./assets/index.css"

const output = () => {
    console.log("资源加载");
    let cssin = document.createElement("link");
    cssin.setAttribute("href",indexcss);
    cssin.setAttribute("rel","stylesheet");
    document.querySelector("head").appendChild(cssin);
    document.getElementById("text").innerHTML = `引入成功<img style = "width: 10em;height: 10em;" src = ${carnival}/>`;
}

export default output

在src下创建index.js
index.js参考代码如下

import output from "./output"

window.onload = function() {
    output();
}

在项目根目录创建webpack.config.js
webpack.config.js参考代码如下

//通过node获取到当前文件的位置
const path = require('path')
//导入刚引入的第三方插件html-webpack-plugin
const HtmlWebpackPplugin = require('html-webpack-plugin')
module.exports = {
    //设置当前入口文件
    entry: './src/index.js',
    //出口配置
    output: {
      //打包的文件名
      filename: 'bundle.js',
      //生成的文件位置
      path: path.resolve(__dirname, './distribution')
      //设置自动清理掉原本的打包文件
      //clean: true
    },
    mode: 'none',
    //webpack插件配置
    plugins: [
      //实例化html-webpack-plugin插件功能
      new HtmlWebpackPplugin({
        //html-webpack-plugin参数配置
        //指定打包HTML文件参照的模板HTML
        template: './src/index.html',
        //生成的html文件名称
        filename: 'app.html',
        //定义打包的js文件引入在新html的哪个标签里
        inject: 'head'
      })
    ],
    //设置webpack-dev-server监听属性
    devServer: {
      //设置webpack-dev-server监听路径
      static: './distribution'
    },
    //设置文件格式处理
    module: {
      rules: [
        {
          //转换文件格式
          test: /\.png$/,
          //文件打包方式
          type: 'asset',
          //文件打包代理路径和名称  这里我们采用随机
          generator: {
            filename: `./assets/[contenthash][ext]`
          }
        },
        {
          //转换文件格式
          test: /\.css$/,
          //文件打包方式
          type: 'asset',
          //文件打包代理路径和名称  这里我们采用随机
          generator: {
            filename: `./assets/[contenthash][ext]`
          }
        }
      ]
    }
}

然后我们在终端执行

npm run webpack

重新打包
然后执行

npm run build

启动项目
在这里插入图片描述
用终端路径访问浏览器
点击app.html

可以看到 css 样式和图片都加载出来了

瑞晟技术服务中心-耿瑞

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack打包图片，样式等静态资源文件

其实前面的都不足以展示出webpack在众打包工具中的优势webpack的优势在于可以打包大规模项目文件以及静态资源文件这才是webpack独有的优势首先我们来创建一个webpack项目找一个文件夹在终端中输入npm init 根据提示操作就会生成一个package.json将webpack引入进来npm install webpack webpack-cli --save-dev然后在终端输入npm install html-webpack-plugin --save
复制链接

扫一扫