macOS
brew install yarn
yarn init -y
yarn add webpack --dev
yarn add babel --dev
yarn add jquery
webpack-demo
|- package.json
|- /dist
|- index.html
|- /src
|- index.js
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>App</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
index.js
import $ from 'jquery';
$(function () {
let html = 'hello world!';
$('body').html(html);
setTimeout(function () {
$('body').css({
"background-color": "blue"
})
}, 3000);
});
手动生成bundle.js文件
./node_modules/.bin/webpack src/index.js dist/bundle.js
新建webpack.config.js文件
touch webpack.config.js
目录结构
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js
webpack.config.js代码
const path = require('path');
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, 'dist')
}
}
./node_modules/.bin/webpack --config webpack.config.js
脚本化命令：修改package.json，添加
“scripts”: {
"build": "webpack"
}
npm run build 替代之前的命令行
