搭建一个webpack打包项目，需要注意的事项

最新推荐文章于 2024-08-16 14:53:07 发布

原创最新推荐文章于 2024-08-16 14:53:07 发布 · 337 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

webpack 专栏收录该内容

3 篇文章

订阅专栏

本文记录了在初学webpack时遇到的常见错误，包括如何正确安装lodash依赖、配置html-webpack-plugin，以及在react中启用jsx语法和使用babel进行jsx转换的步骤。重点强调了dependencies与devDependencies的区别以及exclude配置在webpack中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下是自己初学webpack的时候会犯的错误，记录下来以备以后翻阅。

加载lodash依赖的时候，需要安装在生产依赖而不是开发依赖中：
dependencies：使用当前包所需要的依赖
devDependencies：一些模块在开发时需要依赖。配置这个属性可以提示包的后续开发者安装依赖包。
```
$ sudo cnpm install lodash -S
```

加载html-webpack-plugin插件的时候，忘记了配置文件应该怎么写了：

const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const htmlPlugin = new htmlWebpackPlugin({
  template: path.join(__dirname,"./dist/index.html"),
  filename: "index.html",
});

module.exports = {
  mode: "development",
  plugins:[htmlPlugin],
};

加载插件顺序为：

sudo cnpm install webpack -D
sudo cnpm install webpack-cli -D
sudo cnpm install lodash -S
sudo cnpm install webpack-dev-server -D
sudo cnpm install html-webpack-plugin -D

配置文件需要编写的部分【主要是html-webpack-plugin插件的配置】：

const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const htmlPlugin = new htmlWebpackPlugin({
  template: path.join(__dirname,"./dist/index.html"),
  filename: "index.html",
});

module.exports = {
  mode: "development",
  plugins:[htmlPlugin],
};

js文件需要编写的部分
```
import _ from "lodash";
```

在react中创建组件

终端安装react、react-dom：

$ sudo cnpm install react react-dom -D

启用jsx语法：

安装babel插件

$ sudo cnpm install babel-core babel-loader babel-plugin-transform-runtime -D
$ sudo cnpm install babel-preset-env -D
$ sudo cnpm install babel-preset-stage-0 -D
$ sudo cnpm install babel-preset-react -D

创建.babelrc文件并编写代码：

{
  "presets": ["env","stage-0","react"],
  "plugins": ["transform-runtime"],
}

编写配置文件【记得一定要写exclude排除项】

module:{
  rules:[
    {test:/\.js|jsx$/, use:["babel-loader"],exclude:/node_modules/}
  ]
}