Webpack是一个模块打包工具。它的主要目的是为了在浏览器中使用而打包JavaScript文件，但它也能转换、打包或打包几乎任何资源或资产。Webpack会取模块及其依赖关系，并生成代表这些模块的静态资源。Webpack支持扩展性，并在网络架构和性能方面推广最佳实践。

Webpack

### Webpack 如何缩小打包产物的大小？

Webpack 提供了多种优化方法来减小打包文件的大小，提高应用的加载速度和性能。以下是一些常见的优化策略：

1. **压缩代码（Minification）**
   - 使用 `TerserPlugin` 或其他插件来压缩 JavaScript 代码。这会删除多余的空格、注释，并且还会缩短变量名，以减少文件大小。
   - CSS 文件可以通过 `css-minimizer-webpack-plugin` 来压缩。

2. **树摇（Tree Shaking）**
   - Webpack 支持 ES2015 模块语法的树摇，以删除未引用的代码。只要使用 ES2015 模块语法（`import` 和 `export`），Webpack 就能在生产模式下自动进行树摇。

3. **代码分割（Code Splitting）**
   - 通过代码分割，可以将代码分成多个块，仅在需要时加载这些块。这可以通过 `SplitChunksPlugin` 插件配置实现，或者使用动态 `import()` 语法来创建分割点。

4. **使用更小的库**
   - 优选选择体积更小、功能单一的库，避免引入庞大的库。例如，使用 `lodash-es` 替代 `lodash` 可以更好地进行树摇。

5. **移除未使用的代码和库**
   - 通过代码审查和分析工具（例如 Webpack Bundle Analyzer），识别并移除未使用的库和代码块。

6. **压缩图片和其他资源**
   - 使用 `image-webpack-loader` 等加载器压缩图像文件。
   - 使用 `file-loader` 或 `url-loader` 优化字体和其他二进制资源的加载。

7. **使用外部托管的库**
   - 通过 CDN 加载常用库（如 React, Vue, Lodash 等），而不是将它们打包到应用中。这可以通过配置 externals 字段来实现。

8. **设置生产环境**
   - 确保在生产环境构建时设置 `mode` 为 `'production'`，这将启用许多内置的优化，如压缩、更小的构建输出等。

#### 实际例子

在我的一个项目中，为了减少最终构建的大小，我采用了代码分割和树摇技术。通过将主应用逻辑与第三方库代码分割，并且只引入了使用到的代码模块，最终成功将打包大小减少了约 30%。在使用 `Webpack Bundle Analyzer` 检视构建结果后，进一步移除了几个未被使用的模块，这也有助于减少了最终的文件大小。

这些技巧不仅减少了加载时间，还节约了带宽资源，对用户体验和搜索引擎优化（SEO）都有正面的影响。

How to minimize the size of webpack's bundle?

在Vue.js中，检查是否处于开发模式通常可以通过几种方法来实现，具体取决于你使用的Vue版本和构建工具。以下是几种常见的方法：

### 1. 通过`process.env.NODE_ENV`检查

在Vue项目中，你可以通过`process.env.NODE_ENV`环境变量来检查当前的模式。这个变量通常在Webpack、Vue CLI或其他构建工具中设置。`process.env.NODE_ENV`的值通常设置为`development`、`production`或`test`。

```javascript
if (process.env.NODE_ENV === 'development') {
  console.log('处于开发模式');
} else {
  console.log('不是开发模式');
}
```

### 2. 使用Vue配置

在Vue 2.x中，可以通过`Vue.config.devtools`来检查是否开启了开发工具，这通常在开发模式下会被启用。

```javascript
if (Vue.config.devtools) {
  console.log('开发模式');
} else {
  console.log('生产模式');
}
```

### 3. 利用webpack的DefinePlugin

如果你使用webpack作为构建工具，可以利用`DefinePlugin`在编译时定义环境变量。这样，你可以在代码中直接使用这些变量来决定是否执行某些开发模式下的操作。

```javascript
// webpack.config.js
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      __DEV__: process.env.NODE_ENV !== 'production'
    })
  ]
};

// 在Vue组件中
if (__DEV__) {
  console.log('当前是开发模式');
}
```

这些方法可以根据具体的项目配置和需求选择使用。在实际项目中，通常建议通过环境变量和构建工具来灵活管理代码中的开发和生产模式，确保在生产环境中代码的安全性和性能。

How check if Vue is in development mode?

在使用Storybook来构建组件库时，如果你希望在你的组件中使用SCSS样式，需要做一些配置来确保SCSS文件能正确编译。以下是步骤和例子说明如何在Storybook中使用SCSS：

### 1. 安装必要的依赖

首先，确保你的项目中已经安装了SCSS相关的依赖。如果没有，你需要安装 `sass-loader` 和 `sass` (Dart Sass)：

```bash
npm install --save-dev sass-loader sass
```

或者使用 yarn：

```bash
yarn add --dev sass-loader sass
```

### 2. 配置 Storybook

Storybook使用Webpack来构建，所以我们需要对其Webpack配置进行扩展以支持SCSS。在你的 `.storybook` 目录下，创建或修改 `main.js` 文件：

```javascript
module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
  ],
  webpackFinal: async (config) => {
    // 添加sass-loader
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    // 返回新的配置
    return config;
  },
};
```

这里，我们添加了一个新的规则来处理 `.scss` 文件。该规则使用 `sass-loader`, `css-loader`, 和 `style-loader`。

### 3. 使用 SCSS 在组件中

一旦配置好了SCSS的支持，你就可以在你的组件中直接使用它。例如，创建一个 `Button` 组件，并为其添加SCSS样式：

**Button.js**

```javascript
import React from 'react';
import './Button.scss';

const Button = ({ label }) => {
  return <button className="button">{label}</button>;
};

export default Button;
```

**Button.scss**

```scss
.button {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: darkblue;
  }
}
```

### 4. 创建 Storybook 故事

接下来，在Storybook中为你的 `Button` 组件创建一个故事：

**Button.stories.js**

```javascript
import React from 'react';
import Button from './Button';

export default {
  title: 'Example/Button',
  component: Button,
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  label: 'Click Me',
};
```

### 5. 运行 Storybook

现在一切配置完成，运行 Storybook:

```bash
npm run storybook
```

或者如果你使用yarn的话：

```bash
yarn storybook
```

这样，你就可以在Storybook中看到你的组件，并且它会使用你定义的SCSS样式。

通过以上步骤，你可以在Storybook中灵活使用SCSS来增强你的组件样式。

How to Import scss file with Storybook

在使用Webpack进行项目构建时，经常需要在项目中使用一些环境变量，比如区分开发环境和生产环境的不同配置。Webpack提供了多种方法来向HTML中传递环境变量，接下来我会详细说明几种常用的方法：

### 1. 使用DefinePlugin插件

Webpack内置的`DefinePlugin`可以让你创建全局常量，这些常量可以在编译时配置。这对于允许开发和生产构建之间的不同行为很有用。

**配置方法：**

在`webpack.config.js`文件中配置`DefinePlugin`：

```javascript
const webpack = require('webpack');

module.exports = {
  // Other configurations ...
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ]
};
```

这样配置后，你可以在你的JavaScript代码中使用`process.env.NODE_ENV`来访问环境变量。

如果你需要在HTML文件中直接使用这些变量，可以通过在入口文件中附加这些变量到`window`对象上，然后在HTML中通过JavaScript访问这些变量。

例如，在入口文件`index.js`中：

```javascript
window.myAppEnv = {
  NODE_ENV: process.env.NODE_ENV
};
```

然后在HTML文件中使用：

```html
<script>
  if (window.myAppEnv.NODE_ENV === 'production') {
    // 生产环境的特定逻辑
  }
</script>
```

### 2. 使用HtmlWebpackPlugin

`HtmlWebpackPlugin`是一个非常流行的Webpack插件，它可以帮助生成HTML文件，并在生成的HTML文件中注入脚本和链接标签。

如果要在HTML模板中使用环境变量，可以在Webpack配置中修改`HtmlWebpackPlugin`的配置。

**配置方法：**

```javascript
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // Other configurations ...
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/template.html',
      environment: process.env.NODE_ENV
    })
  ]
};
```

在HTML模板文件`template.html`中，可以这样使用：

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My App</title>
</head>
<body>
    <script>
        if ('<%= htmlWebpackPlugin.options.environment %>' === 'production') {
            // 生产环境的特定逻辑
        }
    </script>
</body>
</html>
```

### 3. 使用环境变量文件（如.env）

对于更复杂的项目，可能需要管理多个环境变量。这时可以使用如`dotenv`这类库来管理环境变量。通过创建不同的`.env`文件来加载不同环境的配置。然后在Webpack中通过`dotenv`和`DefinePlugin`结合使用，将配置传递到你的应用中。

**示例配置：**

首先，安装`dotenv`：

```bash
npm install dotenv
```

然后在`webpack.config.js`中配置：

```javascript
require('dotenv').config();
const webpack = require('webpack');

module.exports = {
  // Other configurations ...
  plugins: [
    new webpack.DefinePlugin({
      'process.env': JSON.stringify(process.env)
    })
  ]
};
```

使用这些方法，你可以根据需求将环境变量传递到HTML中，从而根据不同的环境进行不同的操作。

How can i pass webpack environment variables in html?

在开发现代 Web 应用时，使用 Webpack 来管理和打包资源是非常常见的。为了帮助管理不同版本的发布，我们通常需要在编译时将版本号注入到输出的文件中。Webpack 允许通过多种方式实现这一功能，以下是一些常用的方法：

### 1. 使用 `DefinePlugin` 插件注入版本号

Webpack 内置的 `DefinePlugin` 允许你在编译时创建全局常量，这些常量可以在你的应用代码中使用。例如，可以在配置文件中定义应用的版本号，然后在代码中访问这个版本号。

```javascript
const webpack = require('webpack');
const packageJson = require('./package.json');

module.exports = {
    plugins: [
        new webpack.DefinePlugin({
            'process.env.VERSION': JSON.stringify(packageJson.version)
        })
    ]
};
```

在上面的配置中，`package.json` 中的版本号被注入到全局常量 `process.env.VERSION` 中。在你的应用代码里，你可以通过 `process.env.VERSION` 来访问这个版本号。

### 2. 使用 `BannerPlugin` 插件添加版本信息

`BannerPlugin` 是一个可以在打包出的资源文件顶部添加一个注释头的插件。这个功能常常用于插入版权信息，也可以用来添加版本号。

```javascript
const webpack = require('webpack');
const packageJson = require('./package.json');

module.exports = {
    plugins: [
        new webpack.BannerPlugin({
            banner: `Version: ${packageJson.version}`
        })
    ]
};
```

使用这个插件后，每个打包后的文件顶部会添加如 `Version: 1.0.0` 的注释。

### 3. 使用 `HtmlWebpackPlugin` 来处理 HTML 文件

如果你使用 `HtmlWebpackPlugin` 来处理 HTML 文件，可以在模板中直接引用版本号。首先确保版本号以某种方式传递给这个插件：

```javascript
const HtmlWebpackPlugin = require('html-webpack-plugin');
const packageJson = require('./package.json');

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/template.html',
            version: packageJson.version
        })
    ]
};
```

然后在 `template.html` 中可以使用这样的模板语法来注入版本号：

```html
<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
</head>
<body>
    <script src="bundle.js"></script>
    <footer>
        <p>Version: <%= htmlWebpackPlugin.options.version %></p>
    </footer>
</body>
</html>
```

这样，生成的 HTML 文件将包含正确的版本号。

### 总结

通过这些方法，我们可以灵活地在 Webpack 编译过程中注入版本号，从而更好地管理和维护我们的应用。每种方法都有其适用的场景，选择哪一种取决于具体的项目需求和构建配置。

How can I inject a build number with webpack?

在ReactJS应用中，通常不直接使用`fs`（文件系统）模块，因为React主要运行在浏览器环境中，而`fs`模块是Node.js的一部分，用于服务器端的文件系统操作。浏览器出于安全考虑，没有直接访问文件系统的权限。

如果你的React应用需要处理文件，你可能需要以下几种方法：

1. **使用浏览器的API**：例如，如果你需要让用户能够上传文件，可以使用HTML的`<input type="file" />`元素，并在React中处理文件上传。

2. **使用Web API**：如果需要存储或获取文件，可以通过Web API与服务器进行交互，服务器端可以使用`fs`模块处理文件，然后通过HTTP响应返回给前端。

3. **在构建过程中使用`fs`**：如果你需要在构建你的React应用时处理文件（例如读取配置文件），可以在Node.js脚本中使用`fs`模块。这通常在使用Webpack、Gulp等构建工具的自定义配置或脚本中完成。

举个例子，如果你想在用户上传后处理文件，你可以这样做：

```jsx
class FileUploader extends React.Component {
  handleFileChange = event => {
    const file = event.target.files[0];
    if (!file) {
      return;
    }

    // 可以在这里使用 FileReader API 等处理文件
    const reader = new FileReader();
    reader.onload = (readEvent) => {
      console.log(readEvent.target.result);
      // 你可以在这处理文件的内容
    };
    reader.readAsText(file);
  };

  render() {
    return <input type="file" onChange={this.handleFileChange} />;
  }
}
```

在这个例子中，我们使用了浏览器的`FileReader` API来读取用户上传的文件内容。如果需要与服务器端交互，你可能会使用`fetch`或`axios`等HTTP客户端发送文件数据到服务器。服务器端代码可以使用Node.js的`fs`模块来处理这些文件数据。

在Web浏览器环境中使用 ReactJS 时，由于安全和环境的限制，通常无法直接使用 Node.js 的核心模块，比如 `fs`（文件系统模块）。`fs` 模块是专门为服务器端设计的，用于访问或操作服务器的文件系统。因此，在客户端的浏览器环境中使用 ReactJS 导入 `fs` 模块是不可行的。

如果你的项目中确实需要处理文件，你可以考虑以下几种方法：

1. **使用浏览器的 API:** 例如 `FileReader` API，它可以在浏览器中读取本地文件，但用户必须手动选择文件。

   ```javascript
   function handleFileInputChange(event) {
     const file = event.target.files[0];
     const reader = new FileReader();
     reader.onload = (e) => {
       console.log('文件内容:', e.target.result);
     };
     reader.readAsText(file);
   }

   return <input type="file" onChange={handleFileInputChange} />;
   ```

2. **使用 Web API 或第三方服务:** 如果你需要存储或访问服务器上的文件，你应当通过 API 请求来处理，而不是在客户端直接操作文件系统。

3. **在 Node.js 环境中使用 `fs`:** 如果你的 React 应用是由 Node.js 服务的一部分，例如使用 Next.js 进行服务端渲染或静态网站生成，你可以在服务器端的代码中使用 `fs` 模块。

   ```javascript
   // 在 Next.js 的 API 路由中使用 fs
   import fs from 'fs';
   import path from 'path';

   export default function handler(req, res) {
     const filePath = path.join(process.cwd(), 'data', 'file.txt');
     const data = fs.readFileSync(filePath, 'utf8');
     res.status(200).json({ content: data });
   }
   ```

总之，直接在浏览器端使用 ReactJS 导入和使用 `fs` 模块是不可行的，你需要根据实际的应用场景选择合适的技术方案。

How to require ' fs ' module in reactjs

在 webpack.config.js 中使用 ES6通常涉及到以下几个步骤:

### 1. 使用 Node.js 的原生 ES6 支持

由于Webpack是在Node.js环境下运行的，而Node.js已经支持了大部分ES6的特性，因此你可以直接在`webpack.config.js`中使用ES6的大部分语法。例如，你可以使用`const`和`let`代替`var`，使用箭头函数等。

```javascript
const path = require('path');

module.exports = {
  // ES6箭头函数
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  // 其他配置...
};
```

### 2. 使用 Babel 转译 ES6+

如果你想使用更高级的ES6特性，或者是ES7/ES8等更高版本的ECMAScript特性，那么你可能需要使用Babel来转译这些代码，让它们能在Node.js中运行。

为了在`webpack.config.js`中使用Babel，你可以遵循以下步骤：

**安装 Babel**

首先，你需要安装Babel相应的依赖包。

```bash
npm install --save-dev @babel/core @babel/preset-env @babel/register
```

**配置 Babel**

然后，创建一个`.babelrc`文件，来配置Babel。

```json
{
  "presets": ["@babel/preset-env"]
}
```

**使用 Babel 注册钩子**

最后，在`webpack.config.js`文件的顶部，你需要添加以下代码来注册Babel的转译过程。

```javascript
require('@babel/register');
```

这样，你就可以在`webpack.config.js`文件中使用完整的ES6+语法了。

```javascript
import path from 'path';

export default {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  // 其他配置...
};
```

但要注意，这种方式虽然可以让你使用ES6+的语法编写配置文件，但它可能会稍微降低构建过程的启动速度，因为需要额外的转译步骤。

### 总结

在现代Node.js版本中，许多ES6特性已经被原生支持，所以你可以在`webpack.config.js`中直接使用它们。如果你需要使用超出Node.js原生支持范围的特性，那么可以通过集成Babel来实现。上述两种方法可以帮助你在`webpack.config.js`中使用ES6+的语法，从而让你的配置文件更加现代化和易于维护。

尝试将您的配置命名为`webpack.config.babel.js`. 您应该将[babel-register](https://www.npmjs.com/package/babel-register)包含在项目中。示例见[react-router-bootstrap](https://github.com/react-bootstrap/react-router-bootstrap)。

Webpack 依靠内部[解释](https://www.npmjs.com/package/interpret)来完成这项工作。

作为 @bebraw 建议的替代方案，您可以使用 ES6+ 语法创建 JavaScript 自动化脚本：

    // tools/bundle.js
    
    import webpack from 'webpack';
    import webpackConfig from './webpack.config.js'; // <-- Contains ES6+
    
    const bundler = webpack(webpackConfig);
    
    bundler.run(...);
    

并用 babel 执行它：

    $ babel-node tools/bundle
    

**PS**：当您需要实现更复杂的构建步骤时，通过 JavaScript API 调用 webpack 可能是更好的方法（比通过命令行调用它）。例如，在服务器端捆绑包准备就绪后，启动 Node.js 应用服务器，并在 Node.js 服务器启动后立即启动 BrowserSync 开发服务器。

### 也可以看看：

*   [React 入门套件](https://github.com/kriasoft/react-starter-kit)( `package.json/scripts`, `tools/bundle.js`, `tools/webpack.config.js`)
*   [反应静态样板](https://github.com/kriasoft/react-static-boilerplate)( `run.js`, `webpack.config.js`, `node run`)
*   [您可能不需要 Gulp.js](https://medium.com/swlh/you-might-not-need-gulp-js-89a0220487dd)

另一种方法是使用像这样的 npm 脚本：`"webpack": "babel-node ./node_modules/webpack/bin/webpack"`，然后像这样运行它：`npm run webpack`。

这就是我使用 webpack 4 的效果：

在`package.json`：

    "scripts": {
        "dev": "cross-env APP_ENV=dev webpack-serve --require @babel/register"
    },
    
    "devDependencies": {
        "@babel/core": "^7.0.0-rc.1",
        "@babel/register": "^7.0.0-rc.1",
        "@babel/preset-env": "^7.0.0-rc.1",
        "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2"
    },
    
    "babel": {
      "presets": [
        ["@babel/preset-env", {
          "targets": {
            "node": "current"
          }
        }]
      ],
      "plugins": [
        "transform-es2015-modules-commonjs"
      ]
    }
    

您可以清楚地看到每个依赖项的使用方式，因此不会有任何意外。

_注意我正在使用[`webpack-serve`\--require](https://github.com/webpack-contrib/webpack-serve)，但如果您想使用该`webpack`命令，请将其替换为`webpack --config-register`. 无论哪种情况，`@babel/register`都需要使这项工作正常进行。_

就是这样！

`yarn dev`

并且可以`es6`在配置中使用！

* * *

对于`webpack-dev-server`，使用与命令`--config-register`相同的选项`webpack`

* * *

### 笔记：

**无需将配置文件重命名为`webpack.config.babel.js`（如已接受的答案所建议的那样）。`webpack.config.js`会工作得很好。**

致 2022 年的读者：

    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
    

1.  加入`"type": "module"`\_`package.json`
    
2.  将您的语法更改`webpack.config.js`为 ESM。
    
3.  享受。

How can i use es6 in webpack config js

在使用 Babel 和 Webpack 时，生成sourcemap主要是为了帮助开发者在调试过程中能够追踪到原始源代码，而不是转换后的代码。Sourcemap 是一种映射关系，它可以将压缩、合并或转换后的代码映射回原始源文件。下面是如何在 Babel 和 Webpack 中生成 sourcemap 的步骤：

1. **配置 Babel 生成 sourcemap：**
   在使用 Babel 时，可以在 `.babelrc` 配置文件中或者 Babel 的命令行参数中指定 `sourceMaps` 选项。例如，在 `.babelrc` 文件中，您可以添加：

   ```json
   {
     "presets": ["@babel/preset-env"],
     "sourceMaps": true
   }
   ```

   这会让 Babel 在转换代码时生成对应的 sourcemap 文件。

2. **配置 Webpack 生成 sourcemap：**
   在 Webpack 配置文件 `webpack.config.js` 中，您需要设置 `devtool` 选项来指定生成 sourcemap 的类型。有多种 sourcemap 类型可供选择，例如：

   - `source-map`：在一个单独的文件中生成完整的sourcemap，提供完整的源代码映射，但可能会减慢构建速度。
   - `cheap-module-source-map`：生成较快的sourcemap，但不包含列信息。
   - `eval-source-map`：生成较快的sourcemap，适合开发环境。

   根据您的需求选择合适的类型。示例配置如下：

   ```javascript
   const path = require('path');

   module.exports = {
     entry: './src/index.js',
     output: {
       filename: 'bundle.js',
       path: path.resolve(__dirname, 'dist'),
     },
     devtool: 'source-map', // 选择合适的sourcemap类型
     module: {
       rules: [
         {
           test: /\.js$/,
           exclude: /node_modules/,
           use: {
             loader: 'babel-loader',
             options: {
               presets: ['@babel/preset-env'],
               sourceMaps: true, // 确保 Babel 能够生成 sourcemap
             },
           },
         },
         // 其他 loaders 配置...
       ],
     },
     // 其他 Webpack 配置...
   };
   ```

   在上述配置中，Webpack 会在构建过程中生成sourcemap文件，并在生成的 `bundle.js` 文件中添加引用注释，这样浏览器调试工具就可以链接到源代码。

通过这样的配置，当你运行 webpack 构建时，它会输出包含正确sourcemap的代码，这样开发者就能在浏览器的开发者工具中看到原始的源代码，而不是经过转换的代码，极大地方便了调试。

为了使用源映射，您应该将[`devtool`](https://webpack.js.org/configuration/devtool/)选项_值_从更改`true`为中可用的_值_[`this list`](https://webpack.js.org/configuration/devtool/)，例如`source-map`

    devtool: 'source-map'
    

> [`devtool`](https://webpack.js.org/configuration/devtool/): `'source-map'`\- 发出 SourceMap。

也许其他人曾经遇到过这个问题。如果您使用`UglifyJsPlugin`in，`webpack 2`则需要显式指定该`sourceMap`标志。例如：

    new webpack.optimize.UglifyJsPlugin({ sourceMap: true })

带有源映射的 jsx 的最小 webpack 配置：

    var path = require('path');
    var webpack = require('webpack');
    
    module.exports = {
      entry: `./src/index.jsx` ,
      output: {
        path:  path.resolve(__dirname,"build"),
        filename: "bundle.js"
      },
      devtool: 'eval-source-map',
      module: {
        loaders: [
          {
            test: /.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
              presets: ['es2015', 'react']
            }
          }
        ]
      },
    };
    

运行它：

    Jozsefs-MBP:react-webpack-babel joco$ webpack -d
    Hash: c75d5fb365018ed3786b
    Version: webpack 1.13.2
    Time: 3826ms
            Asset     Size  Chunks             Chunk Names
        bundle.js   1.5 MB       0  [emitted]  main
    bundle.js.map  1.72 MB       0  [emitted]  main
        + 221 hidden modules
    Jozsefs-MBP:react-webpack-babel joco$

**如果针对开发+生产进行优化**，您可以在配置中尝试以下操作：

    const dev = process.env.NODE_ENV !== 'production'
    
    // in webpack.shared.config
    
    {
      devtool: dev ? 'eval-cheap-module-source-map' : 'source-map', 
    }
    

[来自文档：](https://webpack.js.org/configuration/devtool/#devtool)

*   devtool：**“eval-cheap-module-source-map”**提供仅映射行（无列映射）并且速度更快的 SourceMap
*   devtool：**“source-map”**无法缓存模块的 SourceMap，需要为块重新生成完整的 SourceMap。这是用于生产的东西。

另一种选择是假设您不需要用于生产构建的源映射，则为生产返回 false。

我正在使用 webpack 2.1.0-beta.19

在 Webpack 2 上，我尝试了所有 12 个开发工具选项。以下选项链接到控制台中的原始文件并保留行号。请参阅下面的注释：仅限行。

[https://webpack.js.org/configuration/devtool](https://webpack.js.org/configuration/devtool)

**devtool 最佳开发选项**

                                    build   rebuild      quality                       look
    eval-source-map                 slow    pretty fast  original source               worst
    inline-source-map               slow    slow         original source               medium
    cheap-module-eval-source-map    medium  fast         original source (lines only)  worst
    inline-cheap-module-source-map  medium  pretty slow  original source (lines only)  best
    

**仅线路**

源映射被简化为每行一个映射。这通常意味着每个语句有一个映射（假设您是这样编写的）。这可以防止您在语句级别调试执行以及在行的列上设置断点。与最小化结合是不可能的，因为最小化器通常只发出一行。

重新审视这一点

在一个大型项目中，我发现... eval-source-map 重建时间约为 3.5 秒 ... inline-source-map 重建时间约为 7 秒

How do I generate sourcemaps when using babel and webpack?

`publicPath` 是 Webpack 配置中非常重要的一项配置，它用于指定输出目录下的静态资源（如 JavaScript, CSS, 图片等）在浏览器中访问的可用路径。

具体来讲，`publicPath` 指定了打包生成的静态资源在运行时的引用路径前缀。比如说，如果我们在服务器上部署了一个应用，并且希望所有静态资源都放在 `/assets/` 路径下，我们可以将 `publicPath` 设置为 `/assets/`。这样，当Webpack打包过程中遇到代码里静态资源引用时（如图片、字体等），它会自动在资源的URL前面加上 `/assets/` 前缀。

### 示例：
假设我们的项目有一个图片文件：`image.png`，并且我们在JavaScript模块中这样引用它：

```javascript
import image from './image.png';

const imgElement = document.createElement('img');
imgElement.src = image;
document.body.appendChild(imgElement);
```

如果我们的 `webpack.config.js` 文件中 `output` 配置如下：

```javascript
module.exports = {
  // ...
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/assets/'
  },
  // ...
};
```

那么在打包后生成的 `bundle.js` 文件中，对 `image.png` 的引用会被转换成 `/assets/image.png`，这意味着图片会从服务器的 `/assets/` 路径下加载。

### 具体作用：

1. **资源的正确加载**：有助于确保无论应用部署在哪里，资源都能正确地加载。
2. **灵活部署**：比如，可以将静态资源部署到CDN，只需要改变`publicPath`的值即可，而无需更改代码中的资源引用路径。
3. **开发与生产环境的区分**：在开发环境和生产环境中可能会使用不同的`publicPath`，比如在开发环境中使用相对路径（例如 `publicPath: '/'`），而在生产环境中使用CDN路径（例如 `publicPath: 'https://cdn.example.com/assets/'`）。

一个常见的使用场景是结合Webpack的热模块替换（Hot Module Replacement，HMR）功能，在本地开发环境中使用相对路径，以便于实时加载更新的模块。

总结来说，`publicPath` 是Webpack中配置静态资源访问路径的关键选项，它在资源部署和优化前端资源加载方面起着至关重要的作用。

`output.path`
-------------

存储所有输出文件的本地磁盘目录**（绝对路径）**。

**例子：** `path.join(__dirname, "build/")`

Webpack 将把所有内容输出到`localdisk/path-to-your-project/build/`

* * *

`output.publicPath`
-------------------

您的浏览器可以在其中访问上传的捆绑文件。**（绝对路径，或相对于主 HTML 文件）**

**例子：** `/assets/`

假设您将应用程序部署在服务器 root 处`http://server/`。

通过使用`/assets/`，应用程序将在以下位置找到 webpack 资源：`http://server/assets/`。在底层，webpack 遇到的每个 url 都将被重写为以“ `/assets/`”开头。

> `src="picture.jpg"`重写➡`src="/assets/picture.jpg"`
> 
> 访问者：( `http://server/assets/picture.jpg`)
> 
> * * *
> 
> `src="/img/picture.jpg"`重写➡`src="/assets/img/picture.jpg"`
> 
> 访问者：( `http://server/assets/img/picture.jpg`)

当在浏览器中执行时，webpack 需要知道您将在哪里托管生成的包。因此，它能够请求额外的块（当使用[代码分割](http://webpack.github.io/docs/code-splitting.html)时）或分别通过[文件加载器](https://github.com/webpack/file-loader)或[网址加载器](https://github.com/webpack/file-loader)加载的引用文件。

例如：如果您将 http 服务器配置为托管生成的包，`/assets/`则应编写：`publicPath: "/assets/"`

publicPath 仅用于开发目的，第一次看到这个配置属性时我很困惑，但现在我已经使用 webpack 一段时间了，它很有意义

假设您将所有 js 源文件放在`src`文件夹下，并配置 webpack 将源文件构建到`dist`带有`output.path`.

但是你想在一个更有意义的位置提供你的静态资源，比如`webroot/public/assets`，这次你可以使用`out.publicPath='/webroot/public/assets'`，这样在你的html中，你可以用.js引用你的js `<script src="/webroot/public/assets/bundle.js"></script>`。

当你请求时`webroot/public/assets/bundle.js`会`webpack-dev-server`在dist文件夹下找到js

**更新：**

感谢查理·马丁纠正我的答案

原文： publicPath 仅用于开发目的，_这不仅仅是用于开发目的_

> 不，此选项在开发服务器中很有用，但其目的是在生产中异步加载脚本包。假设您有一个非常大的单页应用程序（例如 Facebook）。Facebook 不希望在您每次加载主页时都提供所有 javascript，因此它只提供主页所需的内容。然后，当您转到您的个人资料时，它会使用 ajax 为该页面加载更多 javascript。此选项告诉它从服务器上的哪个位置加载该包

**filename**指定**文件名**，_所有捆绑代码在完成构建步骤后将累积到该文件中。_

**path**指定app.js （文件名）将保存在磁盘中的**输出****目录。**如果没有输出目录，webpack 将为您创建该目录。例如：

    module.exports = {
      output: {
        path: path.resolve("./examples/dist"),
        filename: "app.js"
      } 
    }
    

这将创建一个目录**myproject/examples/dist**，并在该目录下创建**app.js**、**/myproject/examples/dist/app.js**。构建后，您可以浏览到**myproject/examples/dist/app.js**查看捆绑的代码

**publicPath：“我应该在这里放什么？”**

**publicPath指定****Web 服务器**中的虚拟目录，从中提供捆绑文件 app.js。请记住，使用 publicPath 时的服务器一词可以是 webpack-dev-server 或express server 或可与 webpack 一起使用的其他服务器。

例如

    module.exports = {
      output: {
        path: path.resolve("./examples/dist"),
        filename: "app.js",
        publicPath: path.resolve("/public/assets/js")   
      } 
    }
    

此配置告诉 webpack 将所有 js 文件捆绑到**Examples/dist/app.js**中并写入该文件。

**publicPath告诉 webpack-dev-server 或 express 服务器从****服务器**（即 /public/assets/js）中的指定虚拟位置提供此捆绑文件（即**Examples/dist/app.js）**。所以在你的 html 文件中，你必须引用这个文件

    <script src="public/assets/js/app.js"></script>
    

总而言之，publicPath就像`virtual directory`服务器中的映射和`output directory`由output.path配置指定的映射，每当对文件**public/assets/js/app.js的**请求到来时，**/examples/dist/app.js**文件将被提供

您可以使用 publicPath 指向您希望 webpack-dev-server 提供其“虚拟”文件的位置。publicPath 选项将与 webpack-dev-server 的 content-build 选项位于同一位置。 [webpack-dev-server](https://webpack.github.io/docs/webpack-dev-server.html)创建启动时将使用的虚拟文件。这些虚拟文件类似于 webpack 创建的实际捆绑文件。基本上，您会希望 --content-base 选项指向您的 index.html 所在的目录。这是一个示例设置：

    //application directory structure
    /app/
    /build/
    /build/index.html
    /webpack.config.js
    
    
    //webpack.config.js
    var path = require("path");
    module.exports = {
    ...
      output: {
        path: path.resolve(__dirname, "build"),
        publicPath: "/assets/",
        filename: "bundle.js"
      }
    };  
    
    
    //index.html
    <!DOCTYPE>
    <html>
    ...
    <script src="assets/bundle.js"></script>
    </html>
    
    //starting a webpack-dev-server from the command line
    $ webpack-dev-server --content-base build 
    

webpack-dev-server 创建了一个虚拟资产文件夹及其引用的虚拟bundle.js 文件。您可以通过访问 localhost:8080/assets/bundle.js 来测试这一点，然后在您的应用程序中检查这些文件。它们仅在运行 webpack-dev-server 时生成。

What does publicpath in webpack do

在CSS中，`display`属性非常重要，它决定了一个元素如何在页面上显示和布局。以下是 `display`属性的一些常用值及其作用：

1. `none`:

   - 作用：完全隐藏元素，并且不为该元素保留空间。
   - 例子：当您希望在某些条件下不显示一些元素，比如用JavaScript动态隐藏或显示内容。
2. `block`:

   - 作用：使元素表现为块级元素，占据一行的全部宽度，之后的元素会在新的一行显示。
   - 例子：用于布局时，如创建一个自包含的内容区块，例如段落、标题和容器等。
3. `inline`:

   - 作用：使元素在行内显示，不会独占一行，元素的宽度仅由内容决定。
   - 例子：用于格式化文本，如 `<span>`或 `<a>`元素，让它们在段落中内联显示。
4. `inline-block`:

   - 作用：结合了 `inline`和 `block`的特点，不会独占一行，但是可以设置宽度和高度。
   - 例子：当你需要在一行中显示多个块，并且控制它们的大小时，如导航菜单的每个项。
5. `flex`:

   - 作用：使元素成为一个flex容器，其子元素可以使用flex布局的强大特性。
   - 例子：用于创建一个响应式的布局，其中子元素的大小和顺序可以灵活调整。
6. `grid`:

   - 作用：使元素成为一个grid容器，可以定义行和列，创建复杂的二维布局。
   - 例子：用于设计复杂的页面布局，如杂志或报纸式的布局。
7. `table`、`table-row`、`table-cell`等：

   - 作用：这些值模仿了HTML表格标签的行为，允许以表格格式布局页面内容。
   - 例子：当你想用CSS的方式呈现表格数据时，可以选择这些值。
8. `list-item`:

   - 作用：使元素表现为列表项，通常与列表标记一起显示。
   - 例子：用于定制列表的外观，如自定义列表项目符号或项目布局。

这些是 `display`属性中一些常用的值。此外，还有许多其他值和属性组合可以用来实现特定的布局需求。随着Web技术的发展，CSS规范也在不断增加新的显示类型以应对更复杂的设计挑战。继续解释更多的 `display` 属性的值：

9. `inline-flex`:

   - 作用：使元素成为一个行内级的flex容器，这意味着元素可以像 `inline`元素一样在文本行中布局，同时其内部的子元素可以使用flexbox模型。
   - 例子：如果你想要一个小的布局单元能够在文本行中布局，同时又想在这个小单元内部使用flexbox布局，比如在一个段落中的小卡片。
10. `inline-grid`:

    - 作用：使元素成为一个行内级的grid容器，结合了 `inline`和 `grid`的特性。
    - 例子：当你需要在文本流中嵌入一个小的网格布局时使用，例如一个复杂的数学公式或图表。
11. `contents`:

    - 作用：使元素的子元素看起来像是直接放置在其父元素所在的位置，父元素本身不会被渲染成任何盒模型，但是其子元素会正常显示。
    - 例子：当你需要一个容器仅用于语义组织，而不希望它在布局中创建一个新层级时使用。
12. `run-in`:

    - 作用：根据上下文，元素可能表现为 `block`或 `inline`元素。
    - 例子：这个值比较少见，某些情况下可以用于标题和段落之间的布局。
13. `flex-start`、`flex-end`、`center`、`space-between`、`space-around`、`space-evenly`:

    - 作用：这些值多用于flex容器的 `align-items`、`align-content`、`justify-content`等属性，而不是 `display`属性，用来定义flex项目在主轴或交叉轴上的对齐方式。
    - 例子：当你需要在一个flex容器内对齐或分散排列子项时使用。
14. `grid-auto-columns`、`grid-auto-rows`:

    - 作用：这些值用于 `grid`容器上，定义网格中隐式创建的行或列的大小。
    - 例子：当你有一个动态数量的网格项，并且需要自动的行或列大小时。
15. `grid-template-columns`、`grid-template-rows`:

    - 作用：这些值用于 `grid`容器上，定义显式创建的行或列的大小和数量。
    - 例子：当你在设计一个明确的网格布局，需要指定每一列或行的大小。
16. `grid-column-start`、`grid-column-end`、`grid-row-start`、`grid-row-end`:

    - 作用：这些值用于 `grid`项上，定义它们在网格中的位置和跨越的列或行数。
    - 例子：当你需要在网格中放置一个元素，占据多列或多行时。

CSS的 `display`属性是个非常复杂且强大的工具，能够应对各种各样的布局需求。随着CSS规范的不断发展，新的 `display`值和布局模型如Flexbox和Grid提供了前所未有的灵活性和控制力。


使用文件加载器模块请求资源是 webpack 的使用方式（[source](https://github.com/webpack/webpack/issues/395)）。但是，如果您需要更大的灵活性或想要更清晰的界面，您也可以使用我的`copy-webpack-plugin`（[npm](https://www.npmjs.com/package/copy-webpack-plugin)、[Github](https://github.com/kevlened/copy-webpack-plugin)）直接复制静态文件。以你`static`为例`build`：

    const CopyWebpackPlugin = require('copy-webpack-plugin');
     
    module.exports = {
        context: path.join(__dirname, 'your-app'),
        plugins: [
            new CopyWebpackPlugin({
                patterns: [
                    { from: 'static' }
                ]
            })
        ]
    };
    

* * *

_兼容性说明：_如果您使用的是旧版本的 webpack，例如`webpack@4.x.x`，请使用`copy-webpack-plugin@6.x.x`. 否则使用最新的。

你不需要复制东西，webpack 的工作方式与 gulp 不同。Webpack 是一个模块捆绑器，您在文件中引用的所有内容都将包含在内。您只需要为此指定一个加载程序。

所以如果你写：

    var myImage = require("./static/myImage.jpg");
    

Webpack 首先尝试将引用的文件解析为 JavaScript（因为这是默认的）。当然，那会失败。这就是为什么您需要为该文件类型指定一个加载器。[例如，文件](https://github.com/webpack/file-loader)或url [\-loader](https://github.com/webpack/url-loader)获取引用的文件，将其放入 webpack 的输出文件夹（应该`build`在您的情况下）并返回该文件的哈希 url。

    var myImage = require("./static/myImage.jpg");
    console.log(myImage); // '/build/12as7f9asfasgasg.jpg'
    

通常加载器是通过 webpack 配置应用的：

    // webpack.config.js
    
    module.exports = {
        ...
        module: {
            loaders: [
                { test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/, loader: "file" }
            ]
        }
    };
    

当然，您需要先安装文件加载器才能使其工作。

如果您想复制静态文件，可以通过以下方式使用文件加载器：

对于 html 文件：

在 webpack.config.js 中：

    module.exports = {
        ...
        module: {
            loaders: [
                { test: /\.(html)$/,
                  loader: "file?name=[path][name].[ext]&context=./app/static"
                }
            ]
        }
    };
    

在你的 js 文件中：

      require.context("./static/", true, /^\.\/.*\.html/);
    

./static/ 是相对于你的js文件所在的位置。

您可以对图像或其他内容执行相同的操作。上下文是一种强有力的探索方法！

前面提到的**copy-webpack-plugin**带来的一个之前没有解释过的优点是，这里提到的所有其他方法仍然将资源捆绑到你的捆绑文件中（并要求你在某个地方“需要”或“导入”它们）。如果我只想移动一些图像或一些模板部分，我不想用对它们的无用引用来弄乱我的 javascript 捆绑文件，我只希望在正确的位置发出文件。我还没有找到任何其他方法可以在 webpack 中执行此操作。诚然，这不是 webpack 最初设计的目的，但它绝对是当前的用例。（@BreakDS 我希望这能回答你的问题 - 如果你想要的话，这只是一个好处）

Webpack 5 添加了[资产模块](https://webpack.js.org/guides/asset-modules/)，这些模块本质上是常见文件加载器的替代品。我复制了以下文档的相关部分：

> *   `asset/resource`发出一个单独的文件并导出 URL。以前可以通过使用`file-loader`.
> *   `asset/inline`导出资产的数据 URI。以前可以通过使用`url-loader`.
> *   `asset/source`导出资产的源代码。以前可以通过使用`raw-loader`.
> *   `asset`自动选择导出数据 URI 和发出单独的文件。以前可以通过使用`url-loader`资产规模限制来实现。

要添加一个，您可以使您的配置如下所示：

    // webpack.config.js
    
    module.exports = {
        ...
        module: {
            rules: [
                {
                    test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/,
                    type: "asset/resource"
                }
            ]
        }
    };
    

要控制文件的输出方式，您可以使用[模板化路径](https://webpack.js.org/configuration/output/#template-strings)。

在配置中，您可以在此处设置全局模板：

    // webpack.config.js
    module.exports = {
        ...
        output: {
            ...
            assetModuleFilename: '[path][name].[hash][ext][query]'
        }
    }
    

要覆盖一组特定的资产，您可以执行以下操作：

    // webpack.config.js
    
    module.exports = {
        ...
        module: {
            rules: [
                {
                    test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/,
                    type: "asset/resource"
                    generator: {
                        filename: '[path][name].[hash][ext][query]'
                    }
                }
            ]
        }
    };
    

提供的模板将生成类似于`build/images/img.151cfcfa1bd74779aadb.png`. 哈希对于缓存清除等很有用。您应该根据您的需要进行修改。

Webpack相关问题