Webpack入门与实践-CSDN博客

webpack问题	相关回答
为什么使用webpack	因为需要进行打包
webpack可以用来干什么？	暂时知道可以打包、转换、优化

//新建文件
mkdir webpackDemo
cd webpackeDemo
//新建package.json
npm init
//安装webpack
npm install -g webpack
//安装webpack
npm install --save-dev webpack


//新建文件夹
//dist\index.html 
//src\entry.js
//package.json
//node_modules
//webpack.config.js

填写配置文件

//webpack.config.js
const path = require("path")

//通过node模块操作，向外暴露一个配置对象
module.exports = {
    entry: path.join(__dirname, './src/entry.js'), // 需要打包的文件
    output: {
        path: path.join(__dirname, './dirt'), // 打包好的文件上级目录
        filename: 'bunlder.js' //打包好的文件的文件名
    },
    mode: 'development' // 设置mode
}

其他

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<body>
    <div id="title"></div>
    <script src="./bundle.js"></script>
</body>
</html>

//entry.js
document.getElementById('title').innerHTML = "this is webpack test";

//控制台输入
webpack

结果：

操作结果输入bundle.js文件

webpack学习p0