（一）项目搭建

最新推荐文章于 2024-07-11 19:16:28 发布

Can_Yue_

最新推荐文章于 2024-07-11 19:16:28 发布

阅读量111

点赞数

分类专栏： # webpack入门文章标签： node.js html5 javascript

本文链接：https://blog.csdn.net/Can_Yue_/article/details/115563854

版权

webpack入门专栏收录该内容

3 篇文章 0 订阅

订阅专栏

（1）Node.JS安装

（2）npm安装及环境配置

（3）webpack安装（局部安装）

1.新建项目文件夹threejspro，用VScode打开，开启终端输入安装命令：

npm install webpack webpack-cli --save-dev

安装完成后项目路径下回出现node_module文件夹和package-lock.js文件
2.plugins插件安装

 npm install --save-dev html-webpack-plugin

3.loader安装
感兴趣的看官网原方法
loader,帮助webpack打包除了js之外的其他模块

npm install file-loader -D

（4）创建配置文件

在项目文件夹下创建webpack.config.js文件

const path=require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
    mode:"development",//production 工作模式，分为开发模式和产品模式
    entry:"./index.js",//入口
    output:{	//输出，分为相对路径和绝对路径，这里采用相对路径，在项目文件夹移动时比较方便
        // path:path.resolve("D:\Programming\Web\threejspro\build")
        path:path.resolve(__dirname,'build'),
        filename:'index.js'
    },
    plugins:[ //插件
        new HtmlWebpackPlugin({
            template:'./index.html',
            filename:'index.html'
        }),
    ],
    module:{
        rules:[{
            test: /\.(png|jpe?g|gif)$/,
            use:{
                loader:"file-loader",
                options:{
                    outputPath:'img/'
                }
            }
        }]
    }
}

（5）创建入口文件

1.创建index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>helloworld</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

2.创建index.js

import pic from './img/right.png'

var img =new Image();
img.src=pic;
var app=document.querySelector('#app');
app.append(img);

到这一步看一眼项目结构，build是打包之后才有的
在这里插入图片描述

（6）打包

使用命令

npx webpack

进行打包,将js和html文件关联起来
打包后会在输出路径下生成一个build文件夹，里面的index.js和index.html文件已经关联起来
最后右键单击build文件夹里的index.html文件，在浏览器里打开就可以看见图片了

Can_Yue_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（一）项目搭建

（1）Node.JS安装（2）npm安装及环境配置（3）webpack安装（局部安装）1.新建项目文件夹threejspro，用VScode打开，开启终端输入安装命令：npm install webpack webpack-cli --save-dev安装完成后项目路径下回出现node_module文件夹和package-lock.js文件2.plugins插件安装 npm install --save-dev html-webpack-plugin （4）创建配置文件在项目文件夹下创
复制链接

扫一扫