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其实是多个模块化的包,核心功能位于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', () => {
// ...
})
}