webpack最简单的HelloWorld

最新推荐文章于 2021-09-13 19:31:17 发布

bingqise5193

最新推荐文章于 2021-09-13 19:31:17 发布

阅读量626

点赞数

分类专栏： vue 文章标签： vue webpack

本文链接：https://blog.csdn.net/bingqise5193/article/details/82113346

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

安装webpack和webpack-dev-server/webpack-cli

新建一个目录demo，初始化配置：

npm init
npm install webpack --save-dev
npm install webpack-dev-server --save-dev
npm install webpack-cli

JS文件

demo目录下，新建

webpack.config.js

var path = require('path');

var config = {
	//入口：从哪里寻找依赖并编译
	entry:{
		main:'./main'
	},
	//出口：配置编译后的文件存储位置及文件名
	output:{
		path: path.join(__dirname, './dist'), //存放打包后文件的输出目录
		publicPath:'/dist/', //资源文件引用目录
		filename:'main.js' //输出文件名称
	},
}

module.exports = config;

index,html

<!DOCTYPE html>
<html>
<head>
  <meta chaarset="utf-8">
  <title>webpack App</title>
</head>
<body>
  <div id="App">
    HELLO WORLD!
  </div>
  <script type="text/javascript" src="/dist/main.js"></script>
<body>
</html>

main.js 新建一个空文件即可
package.json 增加一行代码

{
  "name": "demo",
  "version": "1.0.0",
  "description": "liaofang demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --config webpack.config.js"
	//当运行npm run dev时，执行此命令， --open 自动在浏览器打开页面
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.17.1",
    "webpack-dev-server": "^3.1.6"
  },
  "dependencies": {
    "webpack-cli": "^3.1.0"
  }
}