使用Webpack打包项目（入门）

最新推荐文章于 2024-07-23 16:39:39 发布

小峤不敲代码

最新推荐文章于 2024-07-23 16:39:39 发布

阅读量271

点赞数

分类专栏：有关配置文章标签： nodejs

本文链接：https://blog.csdn.net/weixin_44555483/article/details/106145227

版权

有关配置专栏收录该内容

6 篇文章 0 订阅

订阅专栏

安装webpack

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

操作

创建项目 mkdir app
在 app 目录下添加 runoob1.js 文件，代码如下：document.write("It works.");
在 app 目录下添加 index.html 文件，代码如下：

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

打包 webpack runoob1.js -o bundle.js
可以看到生成 bundle.js文件

创建第二个js文件

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

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

安装 css-loader 和 style-loader使用cnpm install css-loader style-loader
创建一个 style.css 文件，代码如下：

body {
    background: yellow;
}

修改 runoob1.js 文件，代码如下：

require("!style-loader!css-loader!./style.css");
document.write(require("./runoob2.js"));

重新打包 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

小峤不敲代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Webpack打包项目（入门）

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

扫一扫

专栏目录