手把手教你如何使用webpack打包工具

最新推荐文章于 2023-09-18 20:49:24 发布

罗罗诺亚D路飞

最新推荐文章于 2023-09-18 20:49:24 发布

阅读量119

点赞数

文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/weixin_72923430/article/details/130769628

版权

首先在你的项目下初始化npm

npm init -y

然后安装webpack打包工具

npm install webpack webpack-cli --save-dev

安装打包css的插件

npm install --save-dev style-loader css-loader

调整 package.json 文件

去除main入口文件设置private文件为私有的

将"main": "index.js",替换为"private": true,

然后在项目下创建一个文件夹src 在src下创建index.js 以及 index.css 再放入一个图片

我的图片名字是fandebiao.jpg 你可以自己设置，记得更改js和css里图片的路径

src/index.js

import './style.css';
import Jpg from './fandebiao.jpg';
function component() {
    //创建一个DOM元素 'div'
    const element = document.createElement('div');

    // lodash 在当前 script 中使用 import 引入
    element.innerHTML ='Hello,webpack';
    //添加类名 'hello'
    element.classList.add('hello');
    // 将图像添加到我们已经存在的 div 中。
    const myJpg = new Image();
    myJpg.src = Jpg;
    element.appendChild(myJpg);
    return element;
}
//添加到body中
document.body.appendChild(component());

src/index.css

body{
    margin: 0;
    padding: 0;
}
.hello {
    color: red;
    background: url('./fandebiao.jpg');
    background-size: cover;
    height: 100vh;

}

然后创建文件夹dist 文件夹内新建一个index.html

dist/index.html

<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
     <title>管理资源</title>
   </head>
   <body>
    <script src="bundle.js"></script>
   </body>
 </html>

新建文件webpack.config.js

const path = require('path') // 引用path模块
module.exports = {  // 这里是commrnt.js语法
    // 入口文件
    entry: "./src/index.js",
    // 打包后的出口文件
    output: {
        // 输出的文件名称
        filename: 'bundle.js',
        // 输出的路径  是绝对路径(导入path模块) 这里是用node来做的
        path: path.resolve(__dirname, 'dist'),
    },
    // 使用开发模式打包
    mode: "development",
    //模块 loader 可以链式调用。链中的每个 loader 都将对资源进行转换。链会逆序执行。
    //第一个 loader 将其结果（被转换后的资源）传递给下一个 loader，依此类推。
    //最后，webpack 期望链中的最后的 loader 返回 JavaScript。
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            },
        ],
    },
}

然后可以设置一个快捷键就可以在终端使用 npm run build 来打包一般都会用npm指令

也可以不设置用npx webpack 进行打包

在package.json中

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"build": "webpack"

打包完成后会在dist下看到自动生成js文件和图片进入index.html中打开网页可以查看效果

罗罗诺亚D路飞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
手把手教你如何使用webpack打包工具

然后可以设置一个快捷键就可以在终端使用 npm run build 来打包一般都会用npm指令。然后在项目下创建一个文件夹src 在src下创建index.js 以及 index.css 再放入一个图片。我的图片名字是fandebiao.jpg 你可以自己设置，记得更改js和css里图片的路径。打包完成后会在dist下看到自动生成js文件和图片进入index.html中打开网页可以查看效果。将"main": "index.js",替换为"private": true,
复制链接

扫一扫