webpack 项目配置

webpack 配置项目

介绍

​ 一个前端资源加载/打包工具，它将根据模块的依赖关系进行静态分析，将这些模块根据一定的规则生产对应的静态资源。

基本须知

• webpack 只能理解javascript和JSON文件
• 其他类型的文件交给对应的loader处理

环境支持

Node.js环境

全局命令

webpack index.js -o bundle.js

LOADER 对象

作用：webpack本身只能处理javascript模块，所以大部分时间需要loader帮助做转换。

有两个属性：test 和 use

// webpack.config.js
module.exports = {
  // ...
	module: {
    rules: [
      { test: /\.css$/, use: 'css-loader'},
      { test: /\.ts$/, use: 'ts-loader'},
    ]
  }
  // ...
}

PLUGINS 数组

作用： 打包优化、资源管理、注入环境变量。（这块研究下）

// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
// ...
  plugins:[
    new HtmlWebpackPlugin({template: "./src/index.html"})
  ]
// ...
}
// 这个插件会为应用程序生成一个 HTML 文件，并自动注入所有生成的bundle
// 注意在本地服务下不会生成文件，只是生成一份内存中的文件，只有在打包时生成。

配置文件 (web pack.config.js)

综上 webpack 需要打包js模块，以及其他类型的文件。配置文件应运而生

module.exports = {
	entry: '', // 入口文件，
  entry: {
    key: 'path', // 多文件打包
  },
  output: {
  	path: '', // 打包路径
  	filename: '', // 指定打包名称 默认 bundle.js
  	filename: '[name].js', // 自动对应entry中的多个key 
	},
  module: {
    loaders: [
      {
        test: /\.jsx?$/, // 用以匹配loaders所处理文件的拓展名的正则表达式
        use: {
          loader: 'babel-loader',
          options: {
            plugins: [require('react-refresh/babel')],
          },
        },
        exclude: /node_modules/,
      }
    ]
  },
}

*项目目录下直接执行webpack会默认载入当前的配置文件

拓展

• Babel

  • 让你可以使用最新的js代码，不用管浏览器支持性；
  • 让你可以使用基于js进行了拓展的语言，例如JSX；

Babel其实是多个模块化的包，核心功能位于babel-core的包中。

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

构建本地服务器

浏览器监听代码修改，其实就是实时打包。

• 使用webpack构建

npm i -D webpack-dev-server

// webpack.config.js
// 新增配置devServer
devServer: {
  contentBase: '', // 本地服务器加载的页面目录
  port: '', // 端口，
  inline: true, // 是否实时刷新
  historyApiFallback: true, // 单页面应用，所有跳转都指向index.html
}

webpack版本更新后 之前的命令统一放入webpack-cli这个npm模块

npm i -D webpack-cli@3 // 最新版本的cli中缺少部分模块的依赖 所以安装@3

// package.json
"scripts": {
  "start": "webpack-dev-server --open", // 启动并自动开启页面
}

npm start // 启动服务器

---

• 使用node express + 中间件 构建服务器

  webpack-dev-server是封装好的，除了webpack.config和命令行参数之外，很难去做定制型开发。而 webpack-dev-middleware是中间件，可以编写自己的后端服务然后使用它，开发更灵活。

准备工作

npm i -D express
npm i -D webpack-dev-middleware	// 热编译中间件
npm i -D webpack-hot-middleware // 热替换中间件
npm i -D connect-history-api-fallback // 页面刷新

• webpack-dev-middleware
  • 它将打包后的文件直接写入内存；
  • 每次请求都将获得最新的打包结果；
  • 在watch模式下启动，代码若发生变化，会停止旧的bundle并且延迟请求知道编译完成。
• webpack-hot-middleware
  • 实现热更新替换；

// 项目目录下新建 server.js
const express = require('express')
const webpack = require('webpack')
const webpackDevMiddleware = reqiure('webpack-dev-middleware')
const webpackHotMiddleware = reqiure('webpack-hot-middleware')

const webpackConfig = require('./webpack.config.js')

const app = express()
const compiler = webpack(webpackConfig)

app.use(
	webpackDevMiddleware(compiler, {
    // options
    publicPath: webpackConfig.output.publicPath,
  })
)
app.use(
	webpackMiddleware(compiler, {
		heartbeat: 5000, // 一般为config中entry配置中客户端timeout的一半
  })
)

app.listen(port, () => {
  console.log('服务启动')
})

// webpack.config.js
module.exports = {
	entry: [
		"webpack-hot-middleware/client?timeout=10000&reload=true&quiet=true",
		path.resolve(__dirname, "./src/index.js")
	],
	plugins: [
  	...
		new webpack.HotMoudleReplacementPlugin(),
	]
}

// package.json
"scripts": {
  "start": "node ./server.js",
}

npm start

原生热替换失败的解决办法

if(module.hot) {
  module.hot.accept('./test.js', () => {
    // ...
  })
}