首先新建一个文件夹，我们起名叫做"webpack-first-demo"，新建文件夹后进入这个文件夹，初始化 npm(即运行 npm init)
cd webpack-first-demo
npm init
运行成功后会发现在文件夹里会多出一个package.json文件
然后全局安装webpack
cnpm webpack -g
然后在"webpack-first-demo"文件夹里建立如下目录结构里还没有建立的文件
webpack-first-demo目录结构.png
在./src/bar.js里输入如下代码
// ./src/bar.js
export default function bar () {
console.log('我是bar文件')
}
在./src/index.js里输入如下代码
// ./src/index.js
import bar from './bar.js'
bar()
在./page.html里输入如下代码
<!-- ./page.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=dege">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="renderer" content="webkit">
<title>webpack 初始化</title>
</head>
<body>
<div id="app"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>
最后在webpack.config.js里输入如下代码，这里输入的是 webpack 的配置代码
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
}
输入所有的代码后打开命令行进入到webpack-first-demo文件夹里，输入webpack。
webpack
成功后你会发现在该文件夹下多出了node_modules和dist文件夹
网友评论