第一步：
我们需要安装npm，这个只要你有NodeJS运行环境的肯定会有的；这边这个块也就不作叙述
第二步：
我们接下来会选择在项目目录中进行所有的安装和操作，不去选择全局安装；
在电脑任意盘中新建一个项目文件夹，如：test
接下来我们通过cmd进入到这个项目文件夹下，并输入执行npm init，回车，进行初始化：
对于package name之类的配置项，我们完全选择直接回车，到底！
到这一步，就OK了！
此时我们的项目文件夹里就多了一个文件：package.json
第三步：
既然要使用webpack进行打包，那么我们就要来安装webpack了，起初我们就说过都在项目文件夹里完成，不做全局安装；那么接下来输入npm install --save-dev webpack，回车进行安装：
此时我们的项目文件夹，已经又多了一个文件夹和一个json文件：
image.png
第四步：
我们现在可以开始写自己的项目了，那么我这边也就按通常各位大牛分享的例子来写，首先，在项目文件夹下，新建两个文件加src和public,还有一个dist目录存放打包后的文件；
src文件夹中写入world.js和main.js；public文件夹中写入index.html；
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack demo</title>
</head>
<body>
<!--引入打包之后的文件-->
<script src="../dist/bundle.js"></script>
</body>
</html>
main.js
require('./world.js');
function hello(str) {
document.write(str);
}
hello(' Hello Everyone!');
world.js
document.write('Hello xxxx!');
第五步：
按道理，现在已经可以进行打包处理了，最后的结果就是将main.js作为主入口进行操作，最后在dist文件夹中生成一个打包OK之后的文件：bundle.js；然后我们打开index.html文件就会在页面显示我们刚才的那句话了；
但是，忽略了一个问题，那就是我们的配置文件怎么办呢？都在命令行去操作吗？这肯定是很麻烦且不赞成的，那么我们就在项目目录下再建一个文件：webpack.config.js，在里面写入配置文件：
module.exports = {
entry: __dirname + "/src/main.js",//入口文件
output: {
path: __dirname + "/dist",//打包后的文件存放目录
filename: "bundle.js"//打包后输出文件的文件名
}
}
这样我们就可以通过node_modules/.bin/webpack开始运行了；
第六步：
在package.json配置文件的script选项中添加如下代码
"dev": "webpack --mode development",
"build": "webpack --mode production"
image.png
第七步：
当运行 npm run dev命令时，就会调用webpack.config.js配置文件中的入口文件和生成文件的路径，等价于
node_modules/.bin/webpack src/main.js dist/bundle.js --mode development
第八步：
在index.html中调用dist/bundle.js文件，在浏览器中运行访问
网友评论