超详细webpack构建方式补给！
Posted 2bit潮学
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了超详细webpack构建方式补给！相关的知识，希望对你有一定的参考价值。
webpack系列介绍
此系列记录了我在webpack上的学习历程。如果你也和我一样想要好好的掌握webpack,，那么我认为它对你是有一定帮助的，因为教材中是以一名webpack小白的身份进行讲解, 案例demo也都很详细, 涉及到：
-
-
构建方式篇(本章) -
优化篇 -
loader篇 -
配置篇
建议先mark再花时间来看。
（https://github.com/LinDaiDai/webpack-example）
所有文章webpack版本号^4.41.5, webpack-cli版本号^3.3.10。
在webpack3中，webpack本身和它的CLI都是在同一个包中，但在第4版中，两者分开来了，也是为了让我们更好地管理它们。
通过阅读本篇文章你可以学习到：
-
webpack --watch -
webpack-dev-server 工具 -
webpack-dev-middle 工具, 以及配合express搭建本地web服务器 -
webpack-merge 构建不同的环境 -
process.env.NODE_ENV 的基本使用 -
webpack.DefinePlugin 插件指定 NODE_ENV
一、几种开发工具
每次要编译代码时，手动运行 npm run build 就会变得很麻烦。
不知道你有没有使用过类似于vue-cli这样的脚手架工具, 在使用它们的时候, 每次只要执行npm run start这样的指令就可以创建一个本地的web服务器, 然后打开一个例如localhost:8080这样的端口页面, 同时还有热更新等功能.
其实这些功能的实现都是vue-cli内部使用了webpack.
webpack中有几个不同的选项，可以帮助你在代码发生变化后自动编译代码.
webpack's Watch Mode(观察者模式)
观察者模式, 只需要在package.json里配置一个脚本命令:
"scripts": {
"watch": "webpack --watch"
}
使用npm run watch命令之后, 会看到编译过程, 但是不会退出命令行, 而是实时监控文件.
比如你在重新修改了本地的代码并保存后, 它会重新进行编译, 不需要我们手动再执行编译指令, 缺点是你需要手动刷新页面才能看到更改效果.
(--watch也可以简写为-w)
webpack-dev-server
使用webpack-dev-server会为你提供一个简单的web服务器, 它的作用就是监听文件的改变并自动编译, 同时会自动刷新页面. 比观察者模式厉害.
使用步骤:
-
安装:
$ npm i --save-dev webpack-dev-server -
添加脚本命令:
"start": "webpack-dev-server --open"
使用此指令效果:
不会生成dist文件夹, 而是开启了一个本地的web服务器localhost:8080
每次修改了本地代码之后, 都会重新自动编译, 并刷新页面
其它配置项:
webpack-dev-server也有很多配置项能在webpack.config.js中配置
只需要在devServer里进行配置, 例如:
module.exports = {
devServer: {
contentBase: './dist', // 告诉服务器从哪里提供内容
host: '0.0.0.0', // 默认是 localhost
port: 8000, // 端口号, 默认是8080
open: true, // 是否自动打开浏览器
hot: true, // 启用 webpack 的模块热替换特性
hotOnly: true // 当编译失败之后不进行热更新
}
}
如果你使用了这个功能之后, 你就会发现, 它就有点vue-cli的样子了.
更多关于devServer的配置可以查看这里: https://www.webpackjs.com/configuration/dev-server
webpack-dev-middleware
基本使用
webpack-dev-middleware 是一个容器(wrapper)，它可以把 webpack 处理后的文件传递给一个服务器(server)。
webpack-dev-server 能够开启一个本地的web服务器, 就是因为在内部使用了它，但是, 它也可以作为一个包来单独使用.
这里我就以官方的案例来进行讲解.
使用webpack-dev-middleware配合express server来介绍它的功能.
（express是一个很精简的Node.js开发框架，如果你之前没用过也没关系，使用起来很简单。）
先来说下我的需求, 我想要实现一个这个功能:
-
配置一条 script指令让它能运行一个本地web服务器(也就是能够在localhost: 3000中查看页面) -
每次修改本地代码能够重新编译 -
但是不会自动刷新页面
-
安装所需的依赖:
$ npm i --save-dev webpack-dev-middleware express
-
在项目的根目录下创建一个 server.js文件用来编写本地服务:
// server.js
const express = require('express')
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const app = express()
const config = require('./webpack.config')
const compiler = webpack(config)
// 把 webpack 处理后的文件传递给一个服务器
app.use(webpackDevMiddleware(compiler))
app.listen(3000, function() {
console.log('Example app listening on port 3000!\n');
})
-
在 package.json里配置指令运行server.js:
{
"scripts": {
"server": "node server.js"
}
}
publicPath配置项
在学习这里的时候, 我顺便也了解到了webpack.config.js 中output的另一个属性publicPath.
开始看文档 output.outputPath的时候没太看懂.
(https://www.webpackjs.com/configuration/output/#output-publicpath)
后来我结合webpack-dev-middleware来试了一下它.
首先修改一下webpack.config.js的配置:
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
devtool: 'inline-source-map', // 仅开发环境报错追踪
plugins: [
new CleanWebpackPlugin({
cleanAfterEveryBuildPatterns: ['dist']
}),
new HtmlWebpackPlugin({
title: 'Webpack Output2',
filename: 'index.html',
template: 'src/index.html'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
+ publicPath: '/assets/'
}
}
然后修改一下server.js:
// server.js
const express = require('express')
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const app = express()
const config = require('./webpack.config')
const compiler = webpack(config)
// 把webpack 处理后的文件传递给一个服务器
app.use(webpackDevMiddleware(compiler
+ ,{
+ publicPath: config.output.publicPath
+ }
))
app.listen(3000, function() {
console.log('Example app listening on port 3000!\n');
})
保存上面
以上是关于超详细webpack构建方式补给！的主要内容，如果未能解决你的问题，请参考以下文章
超详细解锁Webpack步骤，跟着我左手右手一个慢动作~~~来吧小伙伴们 一起学起来~~; 如果有坑，可以跟着我跳进去再跳出来哦~~内附填坑操作