使用webpack打包
这里使用的版本是webpack4,执行下面的命令,安装需要的js工具包
npm install --save-dev webpack webpack-cli webpack-node-externals
工具包的作用分别是:
- webpack --基本工具(webpack解析文件通过插件来解析)
- webpack-cli – 支持命令方式
- webpack-node-externals – 打包忽略指定文件如node_module
因为在开发过程中,大有可能用到es6的语法,但是当前很多浏览器只支持es5语法
我们需要安装babel去再编译的时候讲es6转化为es5语法
npm install --save-dev @babel/core @babel/preset-env babel-loader
如果执行上面的命令出现了下面的异常:
源文本中存在无法识别的标记。
所在位置 行:1 字符: 24
+ npm install --save-dev <<<< @babel/core @babel/preset-env babel-loader
+ CategoryInfo : ParserError: (:) [], ParentContainsErrorRecordException
+ FullyQualifiedErrorId : UnrecognizedToken
那么就在每个要安装的插件名称加上双引号
npm install --save-dev "@babel/core" "@babel/preset-env" "babel-loader"
可选:如果你在Babel 6上想要升级,只要运行这个帅气的Babel -upgrade工具:
npx babel-upgrade --write
- 为了让webpack可以解析html文件,我们需要安装html-loader;
- 为了赋值index.html到打包目的文件夹dist下,我们需要通过html-webpack-plugin,
同时,也可自动把打包的js导入到生成的index.html
安装下面html的相关插件
npm install --save-dev html-loader html-webpack-plugin
在根目录下生成文件webpack.config.js,代码如下:
const path = require('path')
const webpack = require('webpack')
const nodeExternals = require('webpack-node-externals')
const HtmlWebPackPlugin = require("html-webpack-plugin")
module.exports = {
entry: {
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"
}
},
{
// Loads the javacript into html template provided.
// Entry point is set below in HtmlWebPackPlugin in Plugins
test: /\.html$/,
use: [{loader: "html-loader"}]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./index.html",
filename: "./index.html",
excludeChunks: [ 'server' ]
})
]
}
注意:
excludeChunks 中我们加入了server,这表示server.js在打包的过程中,我们略过了
因为在index.html中根本就不需要server.js
为了验证babel的作用,我们再server.js中使用es6的import语法。修改server.js代码
如下
import path from 'path'
import express from 'express'
const app = express(),
DIST_DIR = __dirname,
HTML_FILE = path.join(DIST_DIR, 'index.html')
app.use(express.static(DIST_DIR))
app.get('*', (req, res) => {
res.sendFile(HTML_FILE)
})
const PORT = process.env.PORT || 8080
app.listen(PORT, () => {
console.log(`App listening to ${PORT}....`)
console.log('Press Ctrl+C to quit.')
})
在root下生成配置文件:.babelrc,代码如下
{
'presets': ['@babel/preset-env']
}
好了,现在我们需要做的是:
- 用webpack打包生成文件到dist目录下
- 运行dis下的server.js(这个时候我们是不用root下
的server.js,你可以看做这个server.js没了)
在package.json中增加打包和运行的脚本
"scripts": {
"build": "rm -rf dist && webpack --mode development",
"start": "node ./dist/server.js"
},
运行打包命令
npm run build
在windows下可能会出现下面的问题
'rm' 不是内部或外部命令,也不是可运行的程序
或批处理文件。
那是因为在windows下没有rm命令
修改package.json中命令行为:
"scripts": {
"build": "DEL /F /Q dist && webpack --mode development",
"start": "node ./dist/server.js"
},
重新执行打包生成dist文件,结构为:
index.html
server.js
分析
webpack和express的前端整合方式:
- server.js作为webpack.config.js的入口中的server节点,打包进去,但是express需要读取特定
index.html文件作为网站入口,那么执行2 - webpack解析打包所有的前端文件到生成统一的./dist/index.html
- express生成服务器,读取./dist/index.html文件
运行服务器server.js,在terminal执行
npm run start
运行结果如下:
App listening to 8080....
Press Ctrl+C to quit.
在浏览器中输入:http://localhost:8080/ ,显示如下:
Expack
Express and Webpack Boilerplate App