第一步

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 我们的项目了.

webpack 4.x 之安装与简单使用操作

Subscribe

Comments