前言: 因此我们需要搭建一个开发环境, webpack提供了一个devServer帮我们搭建开发环境 devServer需要通过webpack-dev-server运行,所以我们需要下载这个包 代码如下: 在package.json 一切就绪以后,就可以用在控制台,通过npm run dev来启动devServer了 一旦服务启动成功,我们在开发区域写的任何内容都会实时编译到浏览器上 webpack配置代码如下 配置不同输出目录说明: 因此我们需要在配置不同文件打包的loader时配置不同的出口目录 配置图片输出的路径1. devServer认识理解
1.1 为什么需要devServer
1.2 对于devServer的理解
2. 配置devServer
2.1 下载webpack-dev-server
$ yarn add webpack-dev-server -D
2.2 配置devServer
const HtmlWebpackPlugin = require("html-webpack-plugin")
const {resolve} = require("path")
module.exports = {
entry: "./src/main.js",
output: {
filename:"bundle.js",
path:resolve(__dirname,'dist')
},
module:{
rules:[
{
test: /\.css$/,
use:["style-loader","css-loader"]
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:"./src/index.html"
})
],
mode:"development",
// devServer配置
devServer:{
// 项目构建后的路径
contentBase: resolve(__dirname,"dist"),
// 启动gzip压缩
compress:true,
// 端口号
port: 3000,
// 自动打开浏览器
open:true
}
}
2.3 配置运行脚本
{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server"
},
...
}
3. 首先是将前面所学的内容全部配置
// 引入依赖
const HtmlWebpackPlugin = require("html-webpack-plugin")
const {resolve} = require("path")
// webpack 配置
module.exports = {
// 入口
entry: "./src/main.js",
// 出口
output: {
filename:"bundle.js",
path: resolve(__dirname,"dist"),
},
// loader配置
module: {
rules:[
// css
{
test: /\.css$/,
use:["style-loader","css-loader"]
},
// less
{
test: /\.less$/,
use:["style-loader","css-loader","less-loader"]
},
// 样式图片
{
test: /\.(png|jpg|gif)$/,
loader:"url-loader",
// url-loader是在file-loader的基础上封装
// 可以处理为base64图片
options:{
limit: 8 * 1027,
name: "[hash:8].[ext]",
esModule:false
}
},
// html 中img 引入图片
{
test: /\.html$/,
loader:"html-loader",
},
// 其他资源
{
exclude: /\.(html|css|less|js|png|jpg|gif)$/,
loader:"file-loader",
options: {
name: "[hash:8].[ext]"
}
}
]
},
// plugin 配置
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
})
],
mode:"development",
// 开发环境
devServer:{
contentBase: resolve(__dirname,"dist"),
compress: true,
port: 3000,
open: true
}
}
4. 配置不同文件的目录
4.1 说明
4.2 配置输出目录
{
test: /\.(png|jpg|gif)$/,
loader:"url-loader",
options:{
limit: 8 * 1027,
name: "[hash:8].[ext]",
// 配出图片输出的路径
outputPath: "imgs"
}
}