3.vwe中增加css和JavaScript
我們建立了服務器，輸入了地址可以顯示網頁，可是這遠遠不夠，我們需要CSS和JavaScript等等。
通常，我們要引入css或者JavaScript的時候，我們直接在html中通過路徑來引入就好了，但是在
webpack方式中，這是不行的（也許是我打開的方式不對）
那麼我們改怎麼引入呢？通過js，這可能和webpack的實現原理有關，webpack通過JavaScript來
編輯（通過各種loader來分析和加載），不論是css，file還是其他的，最後都被編譯到一個main.js中，最後，再通過html-webpack-plugin
注入到index.html中，所以我們需要一個可以用來注入前端的js，我們暫且叫他index.js，區別於
server.js
好了，現在總結下我們需要做什麼：
- 用webpack打包前端
- 用webpack打包後端
打包需要config.js文件，所以我們需要兩個webpack.config.js，一個命名爲webpack.server.config.js
一個叫做webpack.config.js（這個可能會分爲兩個，一個用於Dev開發環境，一個用於prod生產環境，我們
暫時不管）。
安裝需要的依賴
npm install --save-dev css-loader file-loader style-loader
依賴分析：
- css-loader: css加載
- file-loader: 文件加載
- style-loader： html本地樣式加載
爲了讓代碼分類，我們把代碼放入相應的新建的src下的文件夾，當前目錄爲：
.babelrc
.git
.gitignore
README.md
dist
node_modules
package-lock.json
package.json
webpack.config.js
webpack.server.config.js
src
index.js
html
index.html
css
style.css
js
index.js
img
awful-selfie.jpg
server
server.js
.git
.gitignore
README.md
這些文件可忽略，如果你不用git的話，readme的話也是可選的。在./src/html/index.html中填充我們需要顯示什麼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Express and Webpack App</title>
<link rel="shortcut icon" href="#">
</head>
<body>
<h1>Expack</h1>
<p class="description">Express and Webpack Boilerplate App</p>
<div class="awful-selfie"></div>
</body>
</html>
在./src/css/style.css中定義Application的樣式，style.css，代碼如下：
h1, h2, h3, h4, h5, p {
font-family: helvetica;
color: #3e3e3e;
}
.description {
font-size: 14px;
color: #9e9e9e;
}
.awful-selfie{
background: url(../img/bg.jpg);
width: 300px;
height: 300px;
background-size: 100% auto;
background-repeat: no-repeat;
}
在./src/img/中放入名爲bg.jpg
在.src/中我們放入webpack.config.js中入口的前端js文件index.js，代碼如下：
import logMessage from './js/logger'
import './css/style.css'
// Log message to console
logMessage('Welcome to Expack!')
引入自定義的js，我們再./src/js中定義一般公共的js，這裏我們需要定義一個logger.js
代碼如下：
const logMessage = msg => console.log(msg)
export default logMessage
把root目錄下的server.js放在src/server中，這樣的話可以保持根目錄的簡潔和讓文件放在
合適的地方。
現在我們定義webpack.server.config.js，用作webpack打包服務器，代碼如下：
const path = require('path')
const webpack = require('webpack')
const nodeExternals = require('webpack-node-externals')
module.exports = {
entry: {
server: './src/server/server.js',
},
output: {
path: path.join(__dirname, 'dist'),
publicPath: '/',
filename: '[name].js'
},
target: 'node',
node: {
// Need this when working with express, otherwise the build fails
__dirname: false, // if you don't put this is, __dirname
__filename: false, // and __filename return blank or /
},
externals: [nodeExternals()], // Need this to avoid error when working with Express
module: {
rules: [
{
// Transpiles ES6-8 into ES5
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
}
現在我們定義webpack前端的配置./webpack.config.js
const path = require("path")
const webpack = require('webpack')
const HtmlWebPackPlugin = require("html-webpack-plugin")
module.exports = {
entry: {
//注意這是入口，main而不是server屬性
main: './src/index.js'
},
output: {
path: path.join(__dirname, 'dist'),
publicPath: '/',
filename: '[name].js'
},
//這裏是web，不是node
target: 'web',
devtool: 'source-map',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
},
{
// Loads the javacript into html template provided.
// Entry point is set below in HtmlWebPackPlugin in Plugins
test: /\.html$/,
use: [
{
loader: "html-loader",
//options: { minimize: true }
}
]
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/html/index.html",
filename: "./index.html",
excludeChunks: ['server']
})
]
}
注意：
現在前段的webpack.config.js中的target是’web’，這樣重要的，如果是node的話
會出現錯誤。
好了，現在我們需要打包前端後後端，修改package.json中的腳本如下：
"scripts": {
"build": "rm -rf dist && webpack --mode development --config webpack.server.config.js && webpack --mode development",
"start": "node ./dist/server.js"
},
PS:windows 改成build腳本如下代碼
"build": "DEL /F /Q dist && webpack --mode development --config webpack.server.config.js && webpack --mode development",
最後，執行build腳本：
npm run build
應該可以成功，生成dist文件，如果沒有意外的話，應該有如下文件：
- xxxxxxx.jpg
- index.html
- main.js
- main.js.map
- server.js
啓動服務器
npm run start
運行結果如下：
App listening to 8080....
Press Ctrl+C to quit.
打開地址：http://localhost:8080/ ,正常的話，會出現有文字和圖片，conosole控制檯會出現welcome to webpack!