我需要像 TinyPNG 一样压缩图像并将压缩图像保存在 dist 文件夹中。我使用 webpack 4 并找到了 imagemin-webpack。但我不明白有什么用：插件还是加载器？请帮助为此任务进行配置。
let path = require('path');
let ExtractTextPlugin = require("extract-text-webpack-plugin");
let {imageminLoader} = require("imagemin-webpack");
let imageminGifsicle = require("imagemin-gifsicle");
let conf = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist/'),
filename: 'main.js',
publicPath: 'dist/'
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: "css-loader",
options: {
minimize: true,
sourceMap: true
}
}
]
})
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: "file-loader"
},
{
loader: imageminLoader, …我正在尝试通过 scss 将 font-awesome 中的图标与 webpack 4 一起使用。webconfig
文件如下所示：
const HtmlWebPackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");
const autoprefixer = require("autoprefixer");
module.exports = {
entry: ["./src/index.js"],
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.[hash].js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react"]
}
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: {
minimize: true
}
}
]
},
{
test: /\.(sass|scss)$/,
use: …开发一个 wordpress 网站并使用 webpack 捆绑资源。
我有一个设置，可以将 SCSS 编译为 CSS 等。我想缩小输出 CSS 并删除注释。我尝试添加optimize-css-assets-webpack-plugin并按照示例建议配置它，但它不起作用（没有错误）...
那么我如何修改这个 webpack 配置以便输出 (1) 去除注释并 (2) 缩小？
webpack.config.js：
const path = require("path");
const config = require('./config.js');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
mode: 'production',
entry: ["./src/app.js", "./src/scss/style.scss"],
output: {
path: path.resolve(__dirname, "wp-content/themes/ezdigital"),
filename: "js/[name].js"
},
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].css"
}
},
{
loader: "extract-loader"
},
{
loader: "css-loader?-url" …webpack和npm有什么区别？我应该同时使用它们吗？使用webpack和npm的优点和缺点是什么？更喜欢哪一个呢？懂了npm还有必要学webpack吗？
webpack stats 中的 immutable、dev... 是什么意思？
使用 webpack 构建项目时，我会得到一些统计信息，例如：
Asset Size Chunks Chunk Names
index.html 2.31 KiB [emitted]
js/main.920a0304.js 4.93 MiB 0 [emitted] [immutable] main
js/main.920a0304.js.map 5.42 MiB 0 [emitted] [dev] main
我很好奇[immutable],[dev]到底代表什么。但是，不幸的是，我找不到描述这些概念的地方。我在 webpack 文档中进行了 google 搜索和搜索，但没有成功。
有没有关于这个的文件？
考虑以下webpack.config.js。运行时npx webpack我的调用console.log('Here goes my custom function')被执行。然而运行npx webpack-dev-server它并没有，尽管我可以看到它进行了编译。
这是为什么？我该如何解决这个问题？
module.exports = {
// ...
module: {
// ...
plugins: [
{
apply: (compiler) =>{
compiler.hooks.beforeRun.tap('BeforeRunPlugin', (compilation) => {
console.log('Here goes my custom function')
})
}
},
// ...
],
devServer: {
contentBase: join(__dirname, 'dist'),
publicPath: './assets/',
port: 7700,
open: false,
overlay: true, // show compiler errors as overlay
writeToDisk: true,
}
};
我想用 CSS 模块 + SASS 构建一个项目。我想要一些全局样式（mixins、变量、函数等），这些样式在每个 component.module.scss 中都可用。为此，我需要将全局样式导入到每个模块样式文件中。由于我预计会有很多组件，因此我一直在寻找自动执行此操作的选项。我发现sass-resourcess-loader可能会有所帮助。
然而，由于我没有任何使用 Webpack 的经验，所以我在设置它时遇到了麻烦。
到目前为止我做了什么：
{ test: /.scss$/, use: [ { loader: "style-loader", }, { loader: "css-loader", }, { loader: "sass-loader", }, { loader: "sass -资源加载器", } ], }
抱歉，我无法以某种方式正确设置该代码片段的样式。我也尝试过选项字段：
options: {
resources: "./src/global.scss"
}
但没有任何效果，我的模块化 scss 文件中仍然出现未定义的变量。
我究竟做错了什么？或者有其他方法可以解决这个问题吗？
我正在部署一个使用 CRA(Create-React-App) 生成的项目，并且所有 babel 和 webpack 配置保持不变。
另外，我正在使用 AWS S3 的静态存储桶托管功能部署我的 React 应用程序。
问题是，由于不包含服务器，因此每次部署新文件时，都会创建具有随机哈希值的新块。
当客户端位于具有旧哈希的网站中并且部署了新哈希时，客户端会收到块加载错误。
为了演示这一点，使用 构建项目并yarn build转到/build文件夹以查看 webpack 生成的块。然后使用serve，我可以演示我的部署在本地计算机中的行为方式。
执行后yarn serve，转到正在提供构建文件的相应本地主机。
然后，在/build/static/js文件夹中，根据需要重命名每个块文件的哈希值。
保持浏览器不变，然后重新启动yarn serve，这将提供重命名的块文件。
然后回到浏览器，你很可能会得到两个错误：
Uncaught SyntaxError: Unexpected token '<'
Loading Chunk n failed.(missing: ~~)
我认为可以解决这个问题的方法是在发生 ChunkLoadError 时硬重新加载网页。遗憾的是，window.reload(boolean)函数已被弃用，仅仅这样做并window.location.reload()不能解决这个问题。
+) PS。React.Lazy()我通过在一些代码中使用来实现代码分割。
我有一个看似相当直接的Webpack代码拆分设置,我无法迁移到Webpack 4.我有两个条目,称为main和preview.我想将初始代码拆分为vendor供应商模块中的一个块main,但我想保留preview为一个块.
Webpack 3中工作配置的相关部分:
{
entry: {
main: './src/application.js',
preview: './src/preview.js',
},
plugins: [{
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
chunks: ['main'],
minChunks({context}) {
if (!context) {
return false;
}
const isNodeModule = context.indexOf('node_modules') !== -1;
return isNodeModule;
},
}),
}]
}
具体来说,使用选项中的chunks属性CommonsChunkPlugin可以让我轻松完成我需要做的事情.Webpack 4的optimization.splitChunks配置是否有同等效力？
我有一个复杂的webpack配置设置（将动态设置合并到多个配置文件中），我想看看webpack使用的最终配置是什么，即所有这些和默认设置合并的结果。
如何才能做到这一点？