Copyright © 1999-2019, CSDN.NET, All Rights Reserved
登入
原 webpack搭建伺服器
lilongwei4321閱讀數：4432018-10-11
webpack-dev-server是一個小型的Node.js Express伺服器,我們可以透過它搭建一個本地伺服器,並且實現檔案熱更新;先確保你本地有安裝npm，node
1、切換到你的目錄下對專案進行初始化
npm init
一頓enter,yes之後我們會得到package.json檔案(ps:json不能寫註釋,別複製過去直接用奧!否則會報錯)
{
"name": "webpacktest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
2、安裝webpack
npm install webpack --save-dev
為什麼使用--save-dev而不是--save?
--save 會把依賴包名稱新增到 package.json 檔案 dependencies 下;
--save-dev 則會把依賴包名稱新增到 package.json 檔案 devDependencies 下;
不過這只是它們的表面區別。它們真正的區別是，npm自己的文件說dependencies是執行時依賴，devDependencies是開發時的依賴。
安裝成功後是這樣的
"devDependencies": {
"webpack": "^4.20.2"
3、安裝webpack-dev-server
npm install webpack-dev-server --save-dev
安裝成功之後你的可以看到依賴檔案多出來一個
"webpack": "^4.20.2",
"webpack-dev-server": "^3.1.9"
安裝到這裡結束,接下來開始配置,
新建webpack.config.js用來配置webpack
新建build資料夾作為輸入位置
新建src資料夾存放入口檔案,
在src先建立index.js
var el = document.getElementById("app");
el.innerHTML = "我是測試webpack!";
建立assets資料夾作為指定資原始檔引用的路徑(要實現重新整理這個很重要)
專案結構如下:
4、配置webpack.config.js
const path = require("path");
module.exports = {
entry: {
app: ["./src/index.js"]
output: {
path: path.resolve(__dirname, "build"),
publicPath: "/assets",
filename: "bundle.js"
新建index.html引入asset/bundle.js,你在本地是看不到這個bundle.js的,它其實存在了記憶體中,想看編譯後的程式碼可以去build下找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>測試webpack</title>
</head>
<body>
<p>我發你看的</p>
<script src="assets/bundle.js"></script>
</body>
</html>
在package.json裡給他新增一個自定義命令 dev
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --env development"
"license": "ISC",
命令新增完成,我們就可以透過npm run dev來執行專案了,用過vue-cli的同學,有沒有很熟悉的感覺,哈哈
預設埠號是8080,也可是自己手動去修改埠號,在webpack.config.js中 。 "dev": "webpack-dev-server --
Copyright © 1999-2019, CSDN.NET, All Rights Reserved
登入
原 webpack搭建伺服器
lilongwei4321閱讀數：4432018-10-11
webpack-dev-server是一個小型的Node.js Express伺服器,我們可以透過它搭建一個本地伺服器,並且實現檔案熱更新;先確保你本地有安裝npm，node
1、切換到你的目錄下對專案進行初始化
npm init
一頓enter,yes之後我們會得到package.json檔案(ps:json不能寫註釋,別複製過去直接用奧!否則會報錯)
{
"name": "webpacktest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
2、安裝webpack
npm install webpack --save-dev
為什麼使用--save-dev而不是--save?
--save 會把依賴包名稱新增到 package.json 檔案 dependencies 下;
--save-dev 則會把依賴包名稱新增到 package.json 檔案 devDependencies 下;
不過這只是它們的表面區別。它們真正的區別是，npm自己的文件說dependencies是執行時依賴，devDependencies是開發時的依賴。
安裝成功後是這樣的
"devDependencies": {
"webpack": "^4.20.2"
},
3、安裝webpack-dev-server
npm install webpack-dev-server --save-dev
安裝成功之後你的可以看到依賴檔案多出來一個
"devDependencies": {
"webpack": "^4.20.2",
"webpack-dev-server": "^3.1.9"
}
安裝到這裡結束,接下來開始配置,
新建webpack.config.js用來配置webpack
新建build資料夾作為輸入位置
新建src資料夾存放入口檔案,
在src先建立index.js
var el = document.getElementById("app");
el.innerHTML = "我是測試webpack!";
建立assets資料夾作為指定資原始檔引用的路徑(要實現重新整理這個很重要)
專案結構如下:
4、配置webpack.config.js
const path = require("path");
module.exports = {
entry: {
app: ["./src/index.js"]
},
output: {
path: path.resolve(__dirname, "build"),
publicPath: "/assets",
filename: "bundle.js"
}
}
新建index.html引入asset/bundle.js,你在本地是看不到這個bundle.js的,它其實存在了記憶體中,想看編譯後的程式碼可以去build下找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>測試webpack</title>
</head>
<body>
<p>我發你看的</p>
<script src="assets/bundle.js"></script>
</body>
</html>
在package.json裡給他新增一個自定義命令 dev
{
"name": "webpacktest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --env development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.20.2",
"webpack-dev-server": "^3.1.9"
}
}
命令新增完成,我們就可以透過npm run dev來執行專案了,用過vue-cli的同學,有沒有很熟悉的感覺,哈哈
預設埠號是8080,也可是自己手動去修改埠號,在webpack.config.js中 。 "dev": "webpack-dev-server --