2.vwe开发之用webpack打包前端

使用webpack打包

这里使用的版本是webpack4，执行下面的命令，安装需要的js工具包

npm install --save-dev webpack webpack-cli webpack-node-externals

工具包的作用分别是：

1. webpack --基本工具（webpack解析文件通过插件来解析）
2. webpack-cli – 支持命令方式
3. 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']
}

好了，现在我们需要做的是：

1. 用webpack打包生成文件到dist目录下
2. 运行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的前端整合方式：

1. server.js作为webpack.config.js的入口中的server节点，打包进去，但是express需要读取特定
   index.html文件作为网站入口，那么执行2
2. webpack解析打包所有的前端文件到生成统一的./dist/index.html
3. 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

下一篇 ：3.0vwe开发之webpack整合express