webpack最简单的HelloWorld

安装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

  
  


  

    HELLO WORLD!
  
  

• 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"
  }
}

运行npm run dev