什么是 oo-webpack
oo-webpack 是一个方便快捷地打包和构建前端应用的 npm 包。
它可以自动化处理 js、css、image 等静态资源，还可以支持热更新、压缩等功能。
如何使用 oo-webpack
安装 oo-webpack
在项目目录下执行以下命令：
npm install oo-webpack --save-dev
配置 oo-webpack
- 创建 webpack 配置文件
在项目根目录下创建一个名为 webpack.config.js 的文件，并将以下代码复制粘贴到文件中。
-- -------------------- ---- -------
----- --------- - ----------------------
----- ------ - -----------
-------- ----------
------ -----------------
------- -
----- --------- - --------
--------- -----------
-
---
-------------- - -------这段代码中使用了 oo-webpack 默认的配置，其中 __dirname 表示当前项目根目录。
- 在 package.json 中添加 npm scripts
在 package.json 中添加以下代码，这是因为 oo-webpack 需要通过 npm scripts 来运行。
"scripts": {
"start": "webpack serve --config ./webpack.config.js --env.NODE_ENV=development",
"build": "webpack --config ./webpack.config.js --env.NODE_ENV=production"
}运行 oo-webpack
在命令行中执行以下命令：
npm run start
这将启动一个本地服务器并自动打开浏览器展示你的应用。
示例代码
src/index.js
-- -------------------- ---- ------- ------ - ---- --------- ------ -------------- ------ ---- ---- ------------- -------- ----------- - ----- ------- - ------------------------------ -- ------- --------- -------- --- - ------- -- -------- --- ---- ---- -- ---- ----------------- - ---------------- ----------- - --- ------------------------------- -- --- --- ----- -- --- -------- ---- ----- ------ - --- -------- ---------- - ----- ---------------------------- ------ -------- - ---------------------------------------
src/style.css
.hello {
color: red;
}src/icon.png
展示效果：
结论
通过 oo-webpack 的使用，我们可以方便快捷地打包和构建前端应用，并且还能够支持热更新、压缩等功能，它对提升开发效率和项目可维护性都有很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558ff81e8991b448d64dd