webpack 4x的安装和简单使用

第一步

npm init

这条命令输完后会在当前目录下生成一个package.json文件

第二步

安装webpack
npm install webpack -g//全局安装
npm install --save-dev //局部安装

安装完webpack后我们打开package.json文件发现有了webpack的版本;
图片描述

第三部

//2.安装webpack-cli 一定要装
npm install webpack-cli -g//全部安装
npm install --save-dev webpack-cli// 局部安装
//注意: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 4x的安装和简单使用

zenglbg

引用和评论

# react-router v4 刷新出现找不到页面(NO FOUND)解决方案

vue2 多页面构建后chunks无法注入script问题