第一步
npm init
这条命令输完后会在当前目录下生成一个package.json文件
第一(一)步
yum install npm如果你发现「未找到命令」的话，请使用 服务器包安装语句 比如我这里服务器环境是 CentOS 所以使用 yum 安装 npm
第二步
npm install webpack -g安装完 webpack 后我们打开 package.json 文件发现有了 webpack 的版本
第三部
npm install webpack-cli -g
//注意:webpack 和 webpack-cli安装目录要一致;
webpack-cli 一定要装，安装完后我们发现 package.json 里有了 webpack-cli 的版本
第四步
部署我们的项目
在当前目录下创建一个src的目录和dist的目录,并在src中写好我们的模板;因为现在的webpack 4X 不需要在webpack.config.js中指定我们入口点和输入点了,webpack 4x 会默认使用./src/index.js作为我们的入口点.并在./dist中输出我们的main.js文件.
//util.js
function init() {
var box = document.querySelector('#box');
box.append("Hi Mr. zeng!!,your can")
}
module.exports = {
init: init
}
//index.js
var util = require('./util');
util.init();
//index.html
<body>
<div id="box">
</div>
<script src="main.js"></script>
</body>
然后现在我们的目录是这样的:
第五步
使用我们的webpack看看效果
windows终端请切换到webpack所在目录使用webpack,现在使用webpack必须指定模式(mode)
node_modules/.bin/webpack --mode production //生产
node_modules/.bin/webpack --mode development //开发
第六步
配置我们的package.json
"scripts": {
"devStart": "webpack --mode development",
"proStart": "webpack --mode production"
}
这样我们就可以使用快捷的 npm run devStart, webpack 我们的项目了.