webpack打包初識

時間 2021-08-14

標籤 html webpack web npm json ide spa 命令行 3d 欄目 HTML 简体版

原文原文鏈接

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

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

cd webpack-test

3.使用命令初始化目錄

cnpm init

4.在3步驟基礎上,會輸出讓你輸入初始化目錄的相關信息,你能夠根據本身的實際狀況進行輸入,固然你也能夠一路回車下去

5.使用命令安裝webpack

cnpm install webpack --save-dev

6.查看生成的目錄結構

dir

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

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

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

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

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

cd dist
mkdir js

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

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

	}

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>

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'
			}
		}

13.在命令行運行webpack命令

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

cd dist/js
dir

15.假如修改webpack.config.js文件名,將其重命名爲其餘的名稱,你想的均可以,我這裏用webpack.dev.config.js

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

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

webpack

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

webpack --config webpack.dev.config.js

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"
    }
}