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!