初始化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
相关推荐
Trust yourself2436 分钟前
easyui碰到想要去除顶部栏按钮边框
前端·javascript·easyui
一洽客服系统18 分钟前
网页嵌入与接入功能说明
开发语言·前端·javascript
DoraBigHead31 分钟前
this 的前世今生:谁在叫我,我听谁的
前端·javascript·面试
蓝婷儿1 小时前
每天一个前端小知识 Day 28 - Web Workers / 多线程模型在前端中的应用实践
前端
琹箐1 小时前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
小小小小小惠1 小时前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农1 小时前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
kymjs张涛2 小时前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵2 小时前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian6222 小时前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm