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咱們的項目了.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。