webpack 4x的安装和简单使用

时间 2019-12-08

标签 webpack 4x 安装简单使用繁體版

原文原文链接

第一步html

npm init

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

第二步webpack

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

安装完webpack后咱们打开package.json文件发现有了webpack的版本;
web

第三部npm

//2.安装webpack-cli 必定要装
npm install webpack-cli -g//所有安装
npm install --save-dev webpack-cli// 局部安装
//注意:webpack 和 webpack-cli安装目录要一致;

安装完webpack-cli后咱们发现package.json里有了webpack-cli的版本json

第四步:部署咱们的项目windows

在当前目录下建立一个src的目录和dist的目录,并在src中写好咱们的模板;由于如今的webpack 4X 不须要在webpack.config.js中指定咱们入口点和输入点了,webpack 4x 会默认使用./src/index.js做为咱们的入口点.并在./dist中输出咱们的main.js文件.app

//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>

而后如今咱们的目录是这样的:
ui

第五步:使用咱们的webpack看看效果spa

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