代码拉取完成，页面将自动刷新
webpack && webpack-cli -D
css loader 解析@import 这种语法style-loader 把 css 插入到 head 的标签中mini-css-extract-plugin 将 css 从 js 中抽离出来，单独打包less, less-loader处理 less 文件babel-loader 处理 ES6postcss-loader autoprefixer 处理自动添加浏览器前缀css-minimizer-webpack-plugin 压缩 css && 在 optimization.minimizer 中可以使用 '...' 来访问默认值。防止 css 压缩后 js 又不压缩(js 是默认压缩的)@babel-loader @babel/core @babel/preset-env
@babel/plugin-proposal-class-properties ，装饰器语法 @babel/plugin-proposal-decorators
作用：把变量暴露到全局
expose-loader 可采用内联 loader 或 直接在 webpack.config.js 中配置。import $ from "expose-loader?exposes=$!jquery"; // 采用内联loader处理全局变量问题
module: {
rules: [
{
test: require.resolve("jquery"),
loader: "expose-loader",
options: {
exposes: ["$", "jQuery"],
}
}
]
}
其他使用方式可到npm上查看官网示例
webpack. ProvidePlugin自动加载，在任何地方不必 import 或 require 模块。给每个模块注入一个$new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
});
Externals
module.exports = {
//...
externals: {
/*
import $ from "jquery";
引号前面的是我们项目中引入的包名（可自定义）
例如：import $ from "jqueryTEST";
externals: {
jqueryTEST: 'jQuery',
}
引号后面的是CDN中暴露的全局变量
*/
jquery: "jQuery",
},
};
url-loader内置了file-loader, 是增强的file-loader。
优点： 如果图片较多，会发很多 http 请求，会降低页面性能。url-loader 会将引入的图片编码，生成 dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此 url-loader 提供了一个 limit 参数，小于 limit 字节的文件会被转为 DataURl，大于 limit 的还会使用 file-loader 进行 copy。
注意：
url-loader需要结合file-loader使用。
/* 下载依赖 */
yarn add url - loader file - loader - D
/* webpack.config.js配置 */
module: {
rules: [{
test: /\.(png|jpg|gif)$/i,
use: [{
loader: 'url-loader',
options: {
limit: 40960, // 超过40KB采用file-loader处理
}
}]
}]
}
/* 应用代码段 */
import shrimp from './images/shrimp.png';
let img = new Image()
img.src = shrimp
$('body').append(img);
将不同的文件类型打包到各自的文件夹中
module.exports = {
output: {
filename: "js/[name].[contenthash:8].bundel.js", //采用contenthash，自己发生改变，只重新hash自己，不会hash真个项目。采用[hash]则会hash整个项目
path: path.resolve(__dirname, "dist"),
},
};
module.exports = {
plugins: [
new MiniCssExtractPlugin({
filename: "css/main.[contenthash:8].css",
}),
],
};
module.exports = {
module: {
rules: [{
test: /\.(png|jpg|gif)$/i,
use: [{
loader: "url-loader",
options: {
limit: 40960,
outputPath: "img/",
// fallback: require.resolve('image-webpack-loader')
},
}, ],
}, ],
},
};
// webpack.config.js
module.exports = {
entry: {
...你的配置...
// 配置多入口
main: "./src/index.js", // 前面的key就是打包后的文件名
test: "./src/test.js", // 前面的key就是打包后的文件名
},
// new 多个HtmlWebpackPlugin插件
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html", //模板位置
filename: "index.html", //打包出来后的文件名
minify: {
removeAttributeQuotes: true, //删除双引号
collapseWhitespace: true,
},
hash: true,
chunks: ["main"], // 只引入main模块
}),
new HtmlWebpackPlugin({
template: "./src/home.html", //模板位置
filename: "home.html", //打包出来后的文件名
minify: {
removeAttributeQuotes: true, //删除双引号
collapseWhitespace: true,
},
hash: true,
chunks: ["test"], // 只引入test模块
}),
]
}
dev-tool:'source-map'
产生一个单独的 source-map 文件，功能最完全，但会减慢打包速度
dev-tool:'eval-source-map'
使用 eval 打包源文件模块，直接在源文件中写入干净完整的 source-map，不影响构建速度，但影响执行速度和安全，建议开发环境中使用，生产阶段不要使用
dev-tool:'cheap-module-source-map'
会产生一个不带映射到列的单独的 map 文件，开发者工具就只能看到行，但无法对应到具体的列（符号），对调试不便
dev-tool:'cheap-module-eval-source-map'
不会产生单独的 map 文件，（与 eval-source-map 类似）但开发者工具就只能看到行，但无法对应到具体的列（符号），对调试不便
module.exports = {
/* 配置开发工具 */
devtool: "source-map",
};
module.exports = {
/* Do not use serve with --watch. serve already watches for changes. */
watch: true, // 生产环境不要开启此选项 Do not use serve with --watch. serve already watches for changes.
watchOptions: {
aggregateTimeout: 2000, //防抖
ignored: /node_modules/, //需要忽略的监听文件
poll: 1000, // // 每秒检查一次变动
},
};
cleanWebpackPlugn
自动删除之前的构建包，避免构建包越来越大
copyWebpackPlugin
将已存在的单个文件或整个目录复制到构建目录。
bannerPlugin webpack 内置插件给打包后的 js 添加版权或者说明
http-proxy
module.exports = {
//...
devServer: {
proxy: {
context: ["/auth", "/api"], //如果想将多个特定路径代理到同一目标，则可以使用一个或多个带有 context 属性的对象的数组：
"/api": "http://localhost:3000",
pathRewrite: {
"^/api": "", //不希望传递api 如果不设置此参数 所有请求将会携带/api 即：http://localhost:3000/api
},
changeOrigin: true, // 默认情况下，代理时会保留主机头的来源，可以将 changeOrigin 设置为 true 以覆盖此行为。
},
},
};
denServe: {
before(app) {
app.get('/user', (req, res) => {
res.json({
name: 'pipe_before'
})
})
}
}
💚 在本地搭建项目既有服务端和客户端时非常有用 💚
module.exports = {
resolve: {
modules: [path.resolve(__dirname, "other_modules"), "node_modules"], //webpack 解析模块时应该按顺序搜索的目录
// mainFields: ['style'], //此选项将决定在 package.json 中使用哪个字段导入模块
extensions: [".css", "..."],
alias: {
bootstrap: path.resolve(
__dirname,
"node_modules/bootstrap/dist/css/bootstrap.css"
), // 创建 import 或 require 的别名，来确保模块引入变得更简单。
},
},
};
webpack.definePlugin定义一个全局常量
/* webpack.config.js */
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
});
/* 代码中直接判断 */
if (!PRODUCTION) {
console.log("Debug info");
}
if (PRODUCTION) {
console.log("Production log");
}
/* 未经 webpack 压缩过的代码 */
if (!true) {
console.log("Debug info");
}
if (true) {
console.log("Production log");
}
/* 过压缩后 */
console.log("Production log");
webpack-merge包
let {
smart
} = require("webpack-merge");
let base = require("./webpack.config.my.js");
module.exports = smart(base, {
mode: "development",
devServer: {},
devtool: "source-map",
});
webpack 相关优化，请查看另一个仓库地址 https://gitee.com/pipepandafeng/webpack_opt
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。