webpack0配置
npx webpack
自动会把 src/index.js 打包到 dist/main.js
webpack ./he.js -o ./dist
版本升级后差异：https://blog.csdn.net/qq_43612538/article/details/109389674
webpack 基本使用
- 默认 根目录的配置文件 webpack.config.js
- 可以修改的指定配置文件
webpack -- config webpack.my.js
{
"name": "webpack-demo",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": { // 通过npm run 命令 会自动取找node_modules 下的bin/webpack.cmd -> webpack
"build":"webapck"
},
"devDependencies": {
"webpack": "4.14.0",
"webpack-cli": "^4.2.0"
}
}
webpack html插件（HtmlWebpackPlugin）
- HtmlWebpackPlugin简化了HTML文件的创建，以便为你的webpack包提供服务。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。 你可以让插件为你生成一个HTML文件，使用lodash模板提供你自己的模板，或使用你自己的loader。
- 我们可以自己配置一个 服务器去运行自己的文件
yarn add webpack-dev-server -D - 可以通过 脚本 npx webpack-dev-server ,不会打包文件，只是把打包写入内存中，会以当前目录作为静态目录
注意
webpack-cli 与 webpack-dev-server 版本间不兼容，否则会报错(https://www.cnblogs.com/rapale/p/13863511.html)
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
- 但是我们运行开发服务器时，希望把src/index.html,打包后自动放入到对应的 静态文件夹中访问，这个时候使用 html-webpack-pulgin
//#endregion
let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin");
// /**@type {import('webpack').Configuration}*/
const config = {
mode:"production",//模式 默认两种 product development
entry:"./src/index.js",// 入口
output:{
path: path.resolve(__dirname, "build"),//路径必须是绝对路径
filename:"bundle.[hash].js",//可以设一个一个hash值 防止缓存
},
//开发服务配置
devServer:{
port:3000,//端口号
progress:true,//显示进度条
contentBase:"./build",//服务器的静态跟目录
compress:true,//运行是否压缩
},
//webpack 插件
plugins: [
new HtmlWebpackPlugin({//自动引入js文件
template:"./src/index.html",//模板文件
filename:"index.html",//打包后的
minify:{//压缩打包后的index.html
removeAttributeQuotes:true,//去掉打包后的index.html中的引号
collapseWhitespace:true,//打包后的index.html折叠这一行
},
hash:true,//打包出现一个hash
})
]
}
module.exports = config;
webpack css处理 loader
- loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。
- 安装 css-loader style-loader 运行 npm run dev 会报错 TypeError: this.getResolve is not a function (https://blog.csdn.net/qq_36069339/article/details/100544821)
{
"css-loader": "^3.6.0",
"style-loader": "^2.0.0",
"sass-loader":"
}
let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin");
// /**@type {import('webpack').Configuration}*/
const config = {
mode:"production",//模式 默认两种 product development
entry:"./src/index.js",// 入口
output:{//打包后的文件配置
path: path.resolve(__dirname, "build"),//路径必须是绝对路径
filename:"bundle.js",//可以设一个一个hash值 防止缓存
},
//开发服务配置
devServer:{
port:3000,//端口号
progress:true,//显示进度条
contentBase:"./build",//服务器的静态跟目录
compress:true,//运行是否压缩
},
//webpack 插件
plugins: [
new HtmlWebpackPlugin({//自动引入js文件
template:"./src/index.html",//模板文件
filename:"index.html",//打包后的
// chunks: ["manifest", "vendor",],
minify:{//压缩打包后的index.html
removeAttributeQuotes:true,//去掉打包后的index.html中的引号
collapseWhitespace:true,//打包后的index.html折叠这一行
},
hash:true,//打包出现一个hash
})
],
//webpack loader
module: {//模块
rules:[//规则 css-loader 接续@import 语法
//style-loader 他是把css插入到head的标签中，默认位置底部
//loader 特点 希望单一 作用将任何文件转换成模块
// loader的用法 字符串只能 用一个loader
//多个lader 需要 []
// 如果又额外参数 [{},{}]
//执行顺序 从右向左，从下到上
{
test: /\.css$/,
use: [{
loader: "style-loader"
},"css-loader"]
}
]
}
}
module.exports = config;
