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!