- 安装webpack
npm install webpack webpack-cli -D
-
webpack可以0配置运行
-
手动配置webpack
// 遵守commonJs
module.exports = {
// 指定生产和开发 production development
mode: "development",
devServer: { // 开发环境配置
port: 3000, //端口号
progress: true, // 进度条
contentBase: "./build", // ?
compress: true // 对所有服务启动gzip压缩
},
// 入口
entry: "./src/main.js",
output: { // 出口
filename: "bundle.js",
path: path.resolve(__dirname, "build")
},
plugins: [ // 插件数组
new HtmlWebpackPlugin({
template: "项目index.html路径",
filename: "index.html", // 打包后的index页面
hash: true, // 打包后的index页面引入的bundle【hashCode】.js
minify: {
// 去掉双引号
removeAttributeQuotes: true,
// 折叠index
collapseWhitespace: true
}
})
]
};
- 处理css模块
// webpack.config.js
// 模块内配置css解析
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
"css-loader"
]
},
{ // 解析less-loader
test: /\.less$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
"css-loader",
"less-loader"
]
}
]
}
// 需要的插件 mini-css-extract-plugin 压缩css
autoprefixer postcss-loader(需要单独配置一个postcss.config.js) optimize-css-assets-webpack-plugin
babel-loader babel-core @babel/core @babel/preset-env
@babel/plugin-proposal-class-properties
module: {
rules: [
{
test: /\.js$/,
use: {
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env"
],
plugins: [
"@babel/plugin-proposal-class-properties"
]
}
}
}
]
}
@babel/plugin-proposal-decorators @babel/plugin-transform-runtime @babel/runtime 使用-S 生产环境使用 @babel/polyfill
file-loader url-loader
{
test: /\.(png|jpg|gif)/,
use: {
loader: "url-loader",
options: {
limit: 1,
outpath: "images/"
}
}
}
// 配置
devtool
1) "source-map" // 增加映射单独文件
2) "eval-source-map" // 不会产生单独的文件 但是可以显示行和列
两者的区别:不会产生列 但是是一个单独的映射文件
3) "cleap-module-source-map" 产生后可以保留起来
4) "cleap-module-eval-source-map" 不会产生文件 集成在打包后的文件中,不会产生列
clean-webpack-plugin // 清除某一个文件夹 重新生成新的 copy-webpack-plugin // 拷贝文件 banner-plugin (webpack内部插件) // 版权声明
warning: uglifyjs-webpack-plugin这个好像没起作用 fuck the idea!
module.exports = {
plugins: [ require("autoprefixer") ]
}
5 学习webpack内部机制
学习webpack的原理机制,让生活变得更加有趣
// 同步 方法 tap(注册) call(监听) SyncHook SyncBailHook SyncWaterfallHook SyncLoopHook
// 异步 分为两种: 串行 并行。 注册方法 tapAsync(cb) tapPromise 监听方法 callAsync promise (异步并发) AsyncParallelHook AsyncParallelBailHook (异步熔断)
(异步串行) AsyncSeriesHook AsyncSeriesBailHook AsyncSeriesWaterfallHook