基本使用
目录结构
webpackdemo1
-dist
-src
-main.js
-index.html
cd到webpackdemo1的目录下，执行以下命令
# 全局安装webpack3
cnpm i webpack@3 -g
# 初始化
npm init -y
# 安装jquery
cnpm i jquery@2 -S
main.js
import $ from 'jquery'
$(function () {
$(document.body).css("background", "pink")
})
main.js不能直接在浏览器运行，需要使用webpack编译
# webpack 源文件 目标文件
webpack ./src/main.js ./dist/bundle.js
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title>
</head>
<body>
<script src="../dist/bundle.js"></script>
</body>
</html>
使用配置文件
每次修改main.js文件后，重新编译都需要写命令，很麻烦，这时候可以使用配置文件
在webpackdemo1目录下新建webpack.config.js
const path = require('path')
module.exports = {
// 入口
entry: path.join(__dirname, "./src/main.js"),
output: {
// 输出到什么目录
path: path.join(__dirname, "./dist"),
// 输出文件的名称
filename: "bundle.js"
}
}
后面每次重新编译，直接输入以下命令即可
webpack