欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

使用Webpack打包项目（入门）

程序员文章站 2022-03-03 17:48:12
...

安装webpack

  1. 安装node.js
  2. 为了解决可能存在的版本问题，装过的webpack可以先进行卸载npm uninstall webpack -g
  3. 安装webpack：npm install webpack -g，可以通过命令webpack -h进行测试
  4. 进入项目目录，安装 webpack 依赖npm install webpack --save-dev
  5. 如果需要使用 Webpack 开发工具，要单独安装npm install webpack-dev-server --save-dev

操作

  1. 创建项目 mkdir app
  2. 在 app 目录下添加 runoob1.js 文件，代码如下：document.write("It works.");
  3. 在 app 目录下添加 index.html 文件，代码如下：
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>
  1. 打包 webpack runoob1.js -o bundle.js
  2. 可以看到生成 bundle.js文件

创建第二个js文件

  1. 创建js文件 runoob2.js，代码module.exports = "It works from runoob2.js.";
  2. 更新 runoob1.js 文件，document.write(require("./runoob2.js"));
  3. 重新打包 webpack runoob1.js -o bundle.js

LOADER
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

  1. 安装 css-loader 和 style-loader使用cnpm install css-loader style-loader
  2. 创建一个 style.css 文件，代码如下：
body {
    background: yellow;
}
  1. 修改 runoob1.js 文件，代码如下：
require("!style-loader!css-loader!./style.css");
document.write(require("./runoob2.js"));
  1. 重新打包 webpack runoob1.js -o bundle.js

配置文件
创建 webpack.config.js 文件，代码如下所示：

module.exports = {
    entry: "./runoob1.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        rules: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    },
    mode:"development"
};

接下来只需要执行 webpack 命令即可生成 bundle.js 文件

开发环境

可以通过参数让编译的输出内容带有进度和颜色。

webpack --progress --colors

开启监听模式，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译。

webpack --progress --colors --watch
相关标签： nodejs

上一篇： MySQL数据库及表的创建、删除、修改

下一篇： Shell报错syntax error: unexpected end of file

推荐阅读