webpack

最新推荐文章于 2024-10-24 17:50:07 发布

日晞

最新推荐文章于 2024-10-24 17:50:07 发布

阅读量133

点赞数

分类专栏：前端工程化文章标签： webpack 前端 node.js

原文链接：https://www.runoob.com/w3cnote/webpack-tutorial.html

版权

前端工程化专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章介绍了Webpack作为现代JavaScript应用的静态模块打包工具，如何处理JavaScript和CSS模块，以及如何配置Webpack来打包项目。包括package.json和webpack.config.js的示例，展示了如何使用loader转换CSS，以及Webpack的工作原理。

摘要由CSDN通过智能技术生成

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。比如 CSS 就需要用到 css-loader 和 style-loader。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
  </body>
</html>

package.json

{
  "dependencies": {
    "css-loader": "^2.0.2",
    "style-loader": "^0.23.1",
    "webpack": "^3.12.0"
  },
  "scripts": {
    "version": "webpack -v",
    "build": "webpack test.js bundle.js",
    "build --dev": "webpack",
    "build --pro": "webpack --progress --colors --watch"
  }
}

style.css

body {
  background: yellow;
}

test.js

require("./style.css");
document.write(require("./test2.js"));

test2.js

module.exports = "It works from runoob2.js.";

webpack.config.js

var webpack=require('webpack');
module.exports = {
  entry: "./test.js",
  output: {
    path: __dirname,
    filename: "bundle.js",
  },
  module: {
    loaders: [{ test: /\.css$/, loader: "style-loader!css-loader" }],
  },
  plugins: [new webpack.BannerPlugin("菜鸟教程 webpack 实例")],
};

参考资源：

Webpack 入门教程 | 菜鸟教程 (runoob.com)

概念 | webpack 中文文档 | webpack 中文文档 | webpack 中文网 (webpackjs.com)