初始化webpack应用示例

1、初始化npm

复制代码
mkdir webpack_test
cd webpack_test
npm init

2、安装webpack依赖

复制代码
npm install webpack webpack-cli -D

3、添加文件夹,入口文件

复制代码
mkdir src
touch index.js
touch add-content.js

文件夹结构

index.js

复制代码
import addContent from "./add-content";
document.write('My first Webpack app. <br/>')

addContent()

add-content.js

复制代码
export default function(){
    document.write('I\'m using npm scripts!')
}

4、安装webpack-dev-server依赖

复制代码
npm install webpack-dev-server -D

5、添加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">
    <title>My First Webpack app.</title>
</head>
<body>
    <script src="./main.js"></script>
</body>
</html>

6、配置package.json启动脚本

复制代码
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev":"webpack-dev-server"
  },

7、配置webpack.config.js

复制代码
const path = require('path')

module.exports = {
    entry: './src/index.js',
    output: {
        filename: './main.js',
    },
    mode: "development",
    devServer: {
        static:{
            directory:path.join(__dirname, 'dist'),
        }
    }
}

8、 启动应用

复制代码
npm run dev
相关推荐
小菜花2919 小时前
利用H5实现svg图片中各部分监听事件
前端·javascript·svg·object标签
二十雨辰20 小时前
歌词滚动效果
前端·css
法医20 小时前
和文心快码做朋友,让编程像“说话”一样简单
前端·文心快码
前端小巷子20 小时前
JS 打造「放大镜 + 缩略图」一体组件
前端·javascript·面试
陈随易20 小时前
适合中国宝宝的AI编程神器,文心快码
前端·后端·node.js
知识分享小能手20 小时前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
UrbanJazzerati20 小时前
掌握 DOM 的基础属性与方法:从操作元素到构建动态效果
前端·面试
hashiqimiya21 小时前
html实现右上角有个图标,鼠标移动到该位置出现手型,点击会弹出登录窗口。
前端·html
古夕21 小时前
前端文件下载的三种方式:a标签、Blob、ArrayBuffer
前端·javascript·vue.js
纯真时光21 小时前
Vue3中pinia状态管理库的使用(Composition API 风格)
前端