基于node.js使用webpack打包工具启动的一个小项目-CSDN博客

本文链接：https://blog.csdn.net/u014183772/article/details/107861395

在自己的桌面新建一个文件夹例如my-demo

桌面新建的空的文件夹my-demo
打开cmd控制台，进入进入cmd控制台
查看node的版本 node-v
查看npm的版本 npm -v
查看node和npm是否完好
让该文件基于npm 管理
npm init
基于npm管理一路回车
一路回车，生成一个package.json 文件
生成package.json文件
局部安装webpack
npm i webpack webpack-cli -D

局部安装webpack
生成node_modules
安装webpack-cli后生成node_modules
新建如下三个测试文件（es6的模块化浏览器不支持，可以借助webpack来识别）

index.html

<!DOCTYPE html>
<head>
    <title>这是基于node和webpack打包的首页</title>
</head>
<body>
    <div id="demo"></div>
    <script  src="./boundle.js"></script>
</body>
</html>

header.js

function showHeader(){
    let dom= document.getElementById('demo');
    let head= document.createElement('div');
    let node=document.createTextNode('你是头部');
    head.append(node);
    dom.appendChild(head);
}
export default showHeader;

index.js

import showHeader from './header'
new showHeader();

浏览器无法识别es6 的import
浏览器无法识别import
执行局部安装webpack的打包命令,将当前目录下的index.js 文件打包
npx webpack index.js
在这里插入图片描述
打包完成自动生成一个dist目录和main.js
默认生成打包后的dist目录
手动复制一份index.html 到dist目录
复制index.html

dist 目录中index.html

<!DOCTYPE html>
<head>
    <title>这是基于node和webpack打包的首页</title>
</head>
<body>
    <div id="demo"></div>
    <script  src="./main.js"></script>
</body>
</html>

页面效果
呈现的页面效果

拓展
可以自定义打包目录
在根目录下新建一个webpack.config.js

webpack.config.js

//导入当前文件目录
const path=require('path');
module.exports={
//打包入口文件
    entry:{
       'main':'./index.js'
    },
    //打包出口文件
    output:{
       //打包之后的文件路径
        path:path.resolve(__dirname,'dist'),
        //打包之后的文件名
        filename:'boundle.js'
    }
}

执行 npx webpack 之后在dist目录下生成一个boundle.js
自定义打包路径
npx webpack header.js 和你配置的入口文件不一致时，结果将以你输入的打包入口文件为准

当然也可以修改打包的命令
修改scripts对象中的test

将package.json 中的换成build:“webpack”

package.json

{
  "name": "my-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}