1、初始化项目
npm init
这里注意一点，初始化项目时，不要起名为webpack。
2、安装webpack
这里是局部安装，我推荐这样做。
npm i -D webpack
3、修改package.json加上 "start": "webpack --config webpack.config.js" 方便以后运行命令。
{ "name": "webpack_demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack --config webpack.config.js" }, "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.41.5" } }
4、创建index.html
<html> <head> <meta charset="UTF-8"> </head> <body> <div id="app"></div> <!--导入 Webpack 输出的 JavaScript 文件--> <script src="./dist/bundle.js"></script> </body> </html>
5、创建工具函数show.js
// 操作 DOM 元素，把 content 显示到网页上 function show(content) { window.document.getElementById('app').innerText = 'Hello,' + content; } // 通过 CommonJS 规范导出 show 函数 module.exports = show;
6、创建JS 执行入口文件 main.js
// 通过 CommonJS 规范导入 show 函数 const show = require('./show.js'); // 执行 show 函数 show('Webpack');
7、根目录下创建webpack.config.js
const path = require('path'); module.exports = { // JavaScript 执行入口文件 entry: './main.js', output: { // 把所有依赖的模块合并输出到一个 bundle.js 文件 filename: 'bundle.js', // 输出文件都放到 dist 目录下 path: path.resolve(__dirname, './dist'), } };
8、执行命令
npm run start
