开发时自动编译工具
每次要编译代码时，手动运行 npm run build 就很麻烦
webpack 中有几个不同的选项，可以在代码发生变化后自动编译代码：
- webpack's Watch Mode
- webpack-dev-server
- webpack-dev-middleware
多数场景中，可能需要使用 webpack-dev-server。
watch
在webpack指令后面加上--watch参数即可
主要的作用就是监视本地项目文件的变化, 发现有修改的代码会自动编译打包, 生成输出文件
配置
package.json的scripts"watch": "webpack --watch"运行
npm run watch
以上是cli的方式设置watch的参数
还可以通过配置文件对watch的参数进行修改：
const path = require('path')
// webpack的配置文件遵循着CommonJS规范
module.exports = {
entry: './src/main.js',
output: {
// path.resolve() : 解析当前相对路径的绝对路径
// path: path.resolve('./dist/'),
// path: path.resolve(__dirname, './dist/'),
path: path.join(__dirname, './dist/'),
filename: 'bundle.js'
},
mode: 'development',
watch: true
}
运行npm run build
webpack-dev-server (推荐)
-
安装
devServer：devServer需要依赖webpack，必须在项目依赖中安装webpacknpm i webpack-dev-server webpack -D index.html中修改
<script src="/bundle.js"></script>运行：
npx webpack-dev-server运行：
npx webpack-dev-server --hot --open --port 8090配置
package.json的scripts："dev": "webpack-dev-server --hot --open --port 8090"运行
npm run dev
原理：devServer会在内存中生成一个打包好的bundle.js，它存在于项目的根目录下，专供开发时使用，打包效率高，修改代码后会自动重新打包以及刷新浏览器，用户体验非常好
以上是cli的方式设置devServer的参数
还可以通过配置文件对devServer的参数进行修改：
- 修改
webpack.config.js
const path = require('path')
module.exports = {
// 入口文件配置
entry: './src/index.js',
// 出口文件配置项
output: {
// 输出的路径，webpack2起就规定必须是绝对路径
path: path.join(__dirname, 'dist'),
// 输出文件名字
filename: 'bundle.js'
},
devServer: {
port: 8090,
open: true,
hot: true
},
mode: 'development'
}
- 修改package.json的scripts:
"dev": "webpack-dev-server" - 运行
npm run dev
html-webpack-plugin的使用（html插件）
打包时候npm run build，生成的文件在dist目录下，但是使用webpack-dev-serv时，devServer会在内存中生成一个打包好的bundle.js，并没有生成内容更新到dist/bundle.js，为了使用webpack-dev-serv实现自动编译，修改了index.html中boundle.js的引入 <script src="/bundle.js"></script>，打包后的正确引用应该是<script src="./dist/bundle.js"></script>，为了避免每次打包手动修改，引入html-webpack-plugin；
- 安装html-webpack-plugin插件
npm i html-webpack-plugin -D - 在
webpack.config.js中的plugins节点下配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html'//假设index在src目录下，src为项目的根目录
})
]
- devServer时根据模板在express项目根目录下生成html文件(类似于devServer生成内存中的bundle.js)
- devServer时自动引入bundle.js
- 打包时在dist目录下会自动生成index.html
webpack-dev-middleware
webpack-dev-middleware 是一个容器(wrapper)，它可以把 webpack 处理后的文件传递给一个服务器(server)。 webpack-dev-server 在内部使用了它，同时，它也可以作为一个单独的包来使用，以便进行更多自定义设置来实现更多的需求。
-
安装
express和webpack-dev-middleware：npm i express webpack-dev-middleware -D -
新建
server.jsconst express = require('express'); const webpack = require('webpack'); const webpackDevMiddleware = require('webpack-dev-middleware'); const config = require('./webpack.config.js'); const app = express(); const compiler = webpack(config); app.use(webpackDevMiddleware(compiler, { publicPath: '/' })); app.listen(3000, function () { console.log('http://localhost:3000'); }); 配置
package.json中的scripts:"server": "node server.js"运行:
npm run server
注意: 如果要使用webpack-dev-middleware, 必须使用html-webpack-plugin插件, 否则html文件无法正确的输出到express服务器的根目录
小结
只有在开发时才需要使用自动编译工具, 例如: webpack-dev-server
项目上线时都会直接使用webpack进行打包构建, 不需要使用这些自动编译工具
自动编译工具只是为了提高开发体验### 开发时自动编译工具
每次要编译代码时，手动运行 npm run build 就很麻烦
webpack 中有几个不同的选项，可以在代码发生变化后自动编译代码：
- webpack's Watch Mode
- webpack-dev-server
- webpack-dev-middleware
多数场景中，可能需要使用 webpack-dev-server。
watch
在webpack指令后面加上--watch参数即可
主要的作用就是监视本地项目文件的变化, 发现有修改的代码会自动编译打包, 生成输出文件
配置
package.json的scripts"watch": "webpack --watch"运行
npm run watch
以上是cli的方式设置watch的参数
还可以通过配置文件对watch的参数进行修改：
const path = require('path')
// webpack的配置文件遵循着CommonJS规范
module.exports = {
entry: './src/main.js',
output: {
// path.resolve() : 解析当前相对路径的绝对路径
// path: path.resolve('./dist/'),
// path: path.resolve(__dirname, './dist/'),
path: path.join(__dirname, './dist/'),
filename: 'bundle.js'
},
mode: 'development',
watch: true
}
运行npm run build
webpack-dev-server (推荐)
-
安装
devServer：devServer需要依赖webpack，必须在项目依赖中安装webpacknpm i webpack-dev-server webpack -D index.html中修改
<script src="/bundle.js"></script>运行：
npx webpack-dev-server运行：
npx webpack-dev-server --hot --open --port 8090配置
package.json的scripts："dev": "webpack-dev-server --hot --open --port 8090"运行
npm run dev
原理：devServer会在内存中生成一个打包好的bundle.js，它存在于项目的根目录下，专供开发时使用，打包效率高，修改代码后会自动重新打包以及刷新浏览器，用户体验非常好
以上是cli的方式设置devServer的参数
还可以通过配置文件对devServer的参数进行修改：
- 修改
webpack.config.js
const path = require('path')
module.exports = {
// 入口文件配置
entry: './src/index.js',
// 出口文件配置项
output: {
// 输出的路径，webpack2起就规定必须是绝对路径
path: path.join(__dirname, 'dist'),
// 输出文件名字
filename: 'bundle.js'
},
devServer: {
port: 8090,
open: true,
hot: true
},
mode: 'development'
}
- 修改package.json的scripts:
"dev": "webpack-dev-server" - 运行
npm run dev
html-webpack-plugin的使用（html插件）
打包时候npm run build，生成的文件在dist目录下，但是使用webpack-dev-serv时，devServer会在内存中生成一个打包好的bundle.js，并没有生成内容更新到dist/bundle.js，为了使用webpack-dev-serv实现自动编译，修改了index.html中boundle.js的引入 <script src="/bundle.js"></script>，打包后的正确引用应该是<script src="./dist/bundle.js"></script>，为了避免每次打包手动修改，引入html-webpack-plugin；
- 安装html-webpack-plugin插件
npm i html-webpack-plugin -D - 在
webpack.config.js中的plugins节点下配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html'//假设index在src目录下，src为项目的根目录
})
]
- devServer时根据模板在express项目根目录下生成html文件(类似于devServer生成内存中的bundle.js)
- devServer时自动引入bundle.js
- 打包时在dist目录下会自动生成index.html
webpack-dev-middleware
webpack-dev-middleware 是一个容器(wrapper)，它可以把 webpack 处理后的文件传递给一个服务器(server)。 webpack-dev-server 在内部使用了它，同时，它也可以作为一个单独的包来使用，以便进行更多自定义设置来实现更多的需求。
-
安装
express和webpack-dev-middleware：npm i express webpack-dev-middleware -D -
新建
server.jsconst express = require('express'); const webpack = require('webpack'); const webpackDevMiddleware = require('webpack-dev-middleware'); const config = require('./webpack.config.js'); const app = express(); const compiler = webpack(config); app.use(webpackDevMiddleware(compiler, { publicPath: '/' })); app.listen(3000, function () { console.log('http://localhost:3000'); }); 配置
package.json中的scripts:"server": "node server.js"运行:
npm run server
注意: 如果要使用webpack-dev-middleware, 必须使用html-webpack-plugin插件, 否则html文件无法正确的输出到express服务器的根目录
小结
只有在开发时才需要使用自动编译工具, 例如: webpack-dev-server
项目上线时都会直接使用webpack进行打包构建, 不需要使用这些自动编译工具
自动编译工具只是为了提高开发体验
