1、初始化npm
mkdir webpack_test
cd webpack_test
npm init2、安装webpack依赖
npm install webpack webpack-cli -D3、添加文件夹，入口文件
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 -D5、添加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
