webpack的应用

最新推荐文章于 2023-03-14 11:53:14 发布

szw19910

最新推荐文章于 2023-03-14 11:53:14 发布

阅读量65

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/szw19910/article/details/111137840

版权

webpack

安装

使用一下命令来完成 webpack 的安装：

npm install --save-dev webpack webpack-cli

基本设置

在前后分离的开发方式下，有关前端的开发环境完全和后台服务无关，因此需要我们自行搭建开发环境，当然，你可以使用某个前端框架提供的脚手架来进行快速开发，但是这里，为了更加深入的了解 webpack 的使用，我们从零开始搭建整个环境。

首先，我们初始化一个目录，这个目录就是项目的根目录：

mkdir webpack-demo

然后初始化 npm，再安装 webpack-cli 工具：

cd webpack-demo
npm init -f
npm install webpack webpack-cli --save-dev

现在，我们创建以下项目结构：

  webpack-demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js

src/index.js：

function component() {
  const element = document.createElement('div');

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

index.html：

<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

在这个示例中，<script>标记之间存在一个隐式的依赖关系，即在 index.js 文件中，依赖 lodash 库，因为我们并没有在 index.js 文件中明确声明需要 lodash，只是假设全局变量 _ 的存在。

以这种方式管理 javascript 存在一些问题：

依赖关系不明显，维护困难
如果缺少依赖库或者引入库顺序错误，会导致应用程序无法正常运行
如果包含未使用的依赖项，浏览器则会下载不必要的依赖库

clean-webpack-plugin

我们可以在每次构建之前清理 dist 文件夹，以便清除多余的这些文件：

npm install --save-dev clean-webpack-plugin

webpack.config.js：

+   const { CleanWebpackPlugin } = require("clean-webpack-plugin");
    module.exports = {
      ...
    	plugins: [
+       new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
          title: "Output Management",
          template: "./index.html"
        }),
        new MiniCssExtractPlugin({
          filename: "[name]-[contenthash].css"
        })
      ],
      ...
    };

默认情况下，clean-webpack-plugin 会清理 dist 下的所有文件，我们也可以这样来排除一些不用清理的文件：

new CleanWebpackPlugin({
  cleanOnceBeforeBuildPatterns: ["!lib/*"]
}),

开发模式

现在我们已经对 webpack 有一些基本认知了，接下来，我们来看一下开发模式：

这种方式仅仅用于开发过程，请避免在生产环境中使用他们。

module.exports = {
  mode: "development", 
  ...
};

在开发模式下，我们需要对代码进行调试，对应的配置就是 devtool: "inline-source-map",在非开发模式下，需要关闭此选项，以减少打包的体积。除此以外，在开发模式下，我们还需要热重载，路由重定向，代理等功能。

首先修改配置文件：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack --config webpack.prod.config.js --mode production"
},

source maps

当我们通过 webpack 来进行打包，浏览器中加载的是打包之后的文件，这时，当有某个文件中的代码出现异常时，控制台打印的是打包之后的文件所在的行数，而不是我们自己的源文件。这就让调试显得很困难，因为我们并不知道真正的错误在哪儿。为了使查找错误和警告更加容易，JavaScript提供了 source map，source map 可以将已打包的代码映射回源代码，这样就可以将错误准确的告诉我们了。

module.exports = {
  mode: "development",
  ...
  devtool: "inline-source-map",
};

webpack-dev-server

webpack-dev-server给我们提供了一个简单的 web 服务器以及实时重载的功能：

npm install --save-dev webpack-dev-server

修改配置文件，告诉开发服务器在哪里加载文件：

  module.exports = {
    ...
    devtool: "inline-source-map",
+   devServer: {
+     contentBase: path.resolve(__dirname, "dist")
+   },
    ...
  };

contentBase: "./dist"我们可以使用 http://localhost:8080来访问这个服务，/dist 就是项目的根目录。

webpack-dev-server 编译后不会生成任何文件，相反，它将编译之后的文件保存在内存中，并像在服务器根路径上加载真实文件一样加载它们

启动服务器：

package.json

  {
    ...
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
     	"build": "webpack --config webpack.prod.config.js --mode production",
			"dev": "webpack-dev-server --hot --config webpack.dev.config.js --mode development"
    },
    ...
  }

proxy

请求转发：

devServer: {
  contentBase: path.resolve(__dirname, "dist"),
    port: "8081",
      proxy: {
      "/api": {
        target: "http://localhost:3000"
      }
    }
},

szw19910

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack的应用

webpack安装使用一下命令来完成 webpack 的安装：npm install --save-dev webpack webpack-cli基本设置在前后分离的开发方式下，有关前端的开发环境完全和后台服务无关，因此需要我们自行搭建开发环境，当然，你可以使用某个前端框架提供的脚手架来进行快速开发，但是这里，为了更加深入的了解 webpack 的使用，我们从零开始搭建整个环境。首先，我们初始化一个目录，这个目录就是项目的根目录：mkdir webpack-demo然后初始化 npm，再
复制链接

扫一扫