webpack配置文档
项目目录
image.png
本节需要安装的依赖
npm i webpack-dev-server -D
npm i cross-env -D
NODE_ENV=development 直接设置在mac可以执行，但是在window上不能执行，所以需要cross-env
基本介绍
webpack-dev-server
前端的代码会改动很多，每次都需要重新编译，启动服务器，webpack-dev-server是webpack官方提供给我们的插件，通过webpack配置可以开启一个服务器，它能够方便我们访问css，js，html，文件在编译的过程中是存在内存中的，能够在浏览器中很快的看到我们想要的效果
hot-module-replacement
hot-module-replacement 我们在页面当中改变任何内容，它都会无刷新的帮我们展示编辑之后的效果
NODE_ENV
const isDev= process.env.NODE_ENV === 'development'
这个是启动webpack时手动输入的
特别需要注意的点
webpack-dev-server会去硬盘上检测有没有这个文件，有的话直接访问，所以运行npm run dev:client的时候需要删除dist文件夹
webpack.config.client.js
const path = require('path')
const webpack = require('webpack')
// 在浏览器中打开页面需要引入
const HTMLPlugin = require('html-webpack-plugin')
// 这些环境都是我们启动命令时手动配置的
const isDev = process.env.NODE_ENV === 'development'
var config = {
entry: {
app: path.join(__dirname, '../client/app.js'),
},
output: {
// []表示一个变量 hash如果有变动就刷新浏览器缓存 否则不刷新
filename: '[name].[hash].js',
// path.join根路径下的绝对路径 拼接处生成文件存放路径
path: path.join(__dirname, '../dist'),
// 静态资源引用时的路径， 设置之后表示请求的是否是静态资源
publicPath: '/public'
},
module: {
rules: [
{
test: /.jsx$/,
// babel 编辑es6， es7， es8， jsx 编译成es5
// babel-loader只是一个插件并不包含babel核心代码，还需要安装babel-core
// 默认编译es6，如何配置支持jsx, 新建文件.babelrc
loader: 'babel-loader'
},
// node_modules中的js代码全部都是es5，所以不需要编译了
{
test: /.js$/,
loader: 'babel-loader',
exclude: [
path.join(__dirname, '../node_modules')
]
}
]
},
plugins: [
// 生成一个html页面，webpack编译的时候把生成的所有entry都注入进去，路径是根据output的路径
new HTMLPlugin({
// 最终生成的dist的html会以此作为模板
template: path.join(__dirname, '../client/template.html')
})
]
}
if (isDev) {
config.devServer = {
// 0.0.0.0表示可以用localhost，127.0.0.1，本机ip任意一种方式去访问
host: '0.0.0.0',
port: '8888',
// 我们启一个服务就是服务于webpack编译出来的静态文件的
contentBase: path.join(__dirname, '../dist'),
// hot: true,
// 如果在webpack编译的过程中有任何错误，我们让它在网页上显示一层黑色的背景，并显示错误
overlay: {
// 值显示出现错误的信息
errors: true
},
publicPath: '/public',
historyApiFallback: {
index: '/public/index.html'
}
}
}
module.exports = config
template.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<div id="root">
<!-- App -->
</div>
</body>
</html>
package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build:client": "webpack --config build/webpack.config.client.js",
"build:server": "webpack --config build/webpack.config.server.js",
"dev:client": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js",
"clear": "rimraf dist",
"build": "npm run clear && npm run build:client && npm run build:server",
"start": "node server/server.js"
},
网友评论