1.默认配置文件的名字是 webpack.config.js
webpack是node 写出来的,所以写node 语法
let path = require('path') //自带的
module.exports = {
mode:'development', //模式 默认两种 production 生产模式 development 开发模式
entry:'./src/index.js', //入口 从那个地方开始打包
output : { //出口
filename : 'bundle.js', //打包后的文件名
path:path.resolve(__dirname,'dist'), //路径必须是一个绝对路径 加__dirname代表在当前目录下产生dist目录,不加也可以
}
}
webpack.config.js是默认的配置名称(或者webpackfile.js)
如果要自己更改名字,可以在运行命令的时候后面指定 ,例如npx webpack --config webpack.config.js(名称)
如果觉得太长麻烦,可以在package.json文件中配置
{
"name":"test-webpack",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build":"webpack --config webpack.config.js"
},
"devDependencies": {
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11"
}
}
运行命令的时候,可以是
npm run build
前面打包后,只能在console中看到结果,下面配置在浏览器用localhost的地址访问
1.首先要启动服务 安装服务
yarn add webpack-dev-server -D
可以执行npx webpack-dev-server 或者在脚本中配置,它的好处是不会真实的打包文件,会在生成内存中的打包,会生成一个地址。
2.配置开发服务器
let path = require('path') //自带的
module.exports = {
devServer :{//开发服务器的配置
port:3000, //端口
progress : true, //展示进度条
contentBase:'./build', // 运行静态服务地址
open:true, //启动浏览器
compress:true , //gzip 压缩
},
mode:'development', //模式 默认两种 production 生产模式 development 开发模式
entry:'./src/index.js', //入口 从那个地方开始打包
output : { //出口
filename : 'bundle.js', //打包后的文件名
path:path.resolve(__dirname,'build'), //路径必须是一个绝对路径 加__dirname代表在当前目录下产生dist目录,不加也可以
}
}
配置完成后,执行npm run dev,浏览器访问3000端口,会提示找不到页面
我们想要打包后,自动生成html文件并且将结果放入打包目录下,
3.首先在src目录下新建index.html做为模板,且需要安装html插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--模板-->
</body>
</html>
4.安装html插件
yarn add html-webpack-plugin
5.配置插件
let path = require('path') //自带的路径插件
let htmlWebpackPlugin = require("html-webpack-plugin") // html插件
module.exports = {
devServer :{//开发服务器的配置
port:3000, //端口
progress : true, //展示进度条
contentBase:'./build', // 运行静态服务地址
open:true, //启动浏览器
compress:true , //gzip 压缩
},
mode:'development', //模式 默认两种 production 生产模式 development 开发模式
entry:'./src/index.js', //入口 从那个地方开始打包
output : { //出口
filename : 'bundle[hash:8].js', //打包后的文件名 加hash戳,避免缓存 8只显示8位
path:path.resolve(__dirname,'build'), //路径必须是一个绝对路径 加__dirname代表在当前目录下产生dist目录,不加也可以
},
plugins:[//数组,放着所有webpack的插件
new htmlWebpackPlugin({
template:'./src/index.html', //模板
filename: 'index.html', //打包后的文件名
minify:{//打包压缩
removeAttributeQuotes:true,//删除双引号
collapseWhitespace:true,//打包成一行
},
hash:true,//hash戳
})
]
}
加hash戳,为了防止覆盖以及缓存。
6.执行打包命令,在build下就有了文件,执行npm run dev也能看到console结果