亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

webpack打包初識

發布時間:2020-06-16 03:22:58 來源:網絡 閱讀:919 作者:素顏豬 欄目:開發技術

1.新建項目目錄,目錄名稱webpack-test

webpack打包初識

2.進入新建的項目目錄中(webpack-test)

cd webpack-test

webpack打包初識

3.使用命令初始化目錄

cnpm init

webpack打包初識

4.在3步驟基礎上,會輸出讓你輸入初始化目錄的相關信息,你可以根據自己的實際情況進行輸入,當然你也可以一路回車下去

webpack打包初識

webpack打包初識

5.使用命令安裝webpack

cnpm install webpack --save-dev

webpack打包初識

6.查看生成的目錄結構

dir

webpack打包初識

7.根據項目需求創建相應的目錄

源文件目錄
mkdir src
靜態資源目錄
mkdir dist

webpack打包初識

webpack打包初識

8.進入src目錄,在源文件目錄中創建腳本目錄和樣式目錄

腳本目錄
mkdir script
樣式目錄
mkdir style

webpack打包初識

webpack打包初識

9.進入dist目錄,在靜態資源目錄中創建js目錄,用于存儲打包生成的js文件

cd dist
mkdir js

webpack打包初識

webpack打包初識

10.在script目錄中創建main.js文件,用來編寫我們的業務腳本

cd ..
cd src
cd script
echo ... > main.js
main.js內容如下:
	function helloWorld(){

	}

webpack打包初識

webpack打包初識

webpack打包初識

11.在根目錄創建項目初始化頁面

echo ... > index.html
文件名:index.html
內容如下:
		<!DOCTYPE html>
		<html>
		<head>
			<meta charset="utf-8">
			<meta http-equiv="X-UA-Compatible" content="IE=edge">
			<title></title>
			<link rel="stylesheet" href="">
		</head>
		<body>
			<script src="bundle.js"></script>
		</body>
		</html>

webpack打包初識

12.創建webpack.config.js配置文件

echo ... > webpack.config.js
webpack.config.js內容如下:
		module.exports={
			entry:'./src/script/main.js',
			output:{
				path:'./dist/js',
				filename:'bundle.js'
			}
		}

webpack打包初識

13.在命令行運行webpack命令

webpack打包初識

14.打開dist/js目錄查看生成的bundle.js文件,如果bundle.js文件存在,則說明webpack.config.js文件已經生效

cd dist/js
dir

webpack打包初識

15.假如修改webpack.config.js文件名,將其重命名為其他的名稱,你想的都可以,我這里用webpack.dev.config.js

ren webpack.config.js webpack.dev.config.js
dir

webpack打包初識

16.在命令行運行webpack命令,輸出的內容將與12步驟不同,那么如何設置才能再輸出12步驟的內容?

webpack

webpack打包初識

17.在命令行輸入webpack --config webpack.dev.config.js后回車

webpack --config webpack.dev.config.js

webpack打包初識

18.在自定義配置webpack.config.js文件之后,如何使用webpack的其他參數?

19.修改package.json文件

{
    "name": "webpack-test",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "webpack":"webpack --config webpack.config.js --progress --display-modules --colors --display-reason"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^2.2.1"
    }
}

20.運行webpack

cnpm run webpack

webpack打包初識

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

凌源市| 东源县| 荆州市| 怀远县| 清原| 策勒县| 定兴县| 五台县| 肥乡县| 东辽县| 沙雅县| 南充市| 广昌县| 巴林左旗| 水富县| 浦城县| 江孜县| 星子县| 镇康县| 佛教| 名山县| 白沙| 长白| 香港| 贡山| 漳浦县| 黔西县| 尼木县| 元江| 南涧| 镇坪县| 西城区| 兰州市| 安徽省| 柳河县| 乌兰浩特市| 凉城县| 镇巴县| 嘉峪关市| 申扎县| 沂南县|