webpack基础_html/css_WEB-ITnose
Jun 21, 2016 am 08:55 AM
转载请注明出处:
安装
1.全局:
npm install -g webpack
登入後複製
2.项目:
npm install webpack --save-dev
登入後複製
3. 添加 content.js
module.exports = 'It workd from content.js'
登入後複製
4. 添加入口文件 entry.js
console.log(require('./content.js'))登入後複製
5. 编译文件打包
webpack ./entry.js bundle.js
登入後複製
6. index.html引入 bundle.js
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body><script src="bundle.js"></script></body></html>
登入後複製
7. 查看结果
输出
It workd from content.js
登入後複製
使用Loader加载css
webpack默认只支持js模块, 要打包css文件需要使用 css-loader处理css文件, style-loader应用样式
npm install css-loader style-loader
登入後複製
1 新建 style.css
body { background-color: yellow;}登入後複製
2 入口文件引入 style.css
console.log(require('./content.js'))require('!style!css!./style.css')登入後複製
3 重新编译, 打开html文件, 样式已经加载
绑定Loader
require('!style!css!./style.css')每次都写很长的加载器前缀很麻烦, 可以在编译命令指定加载器绑定到文件后缀名
webpack ./entry.js bundle.js --module-bind "css=style!css"
登入後複製
此时 entry.js可以简化
require('./style.css')登入後複製
配置文件
将配置信息添加到 webpack.config.js配置文件后, 每次只需要执行 webpack即可完成打包任务
module.exports = { entry: './entry.js', output: {}}登入後複製
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱門文章
擊敗分裂小說需要多長時間？
3 週前
By DDD
倉庫：如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險：如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？
3 週前
By 王林
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
1 週前
By 尊渡假赌尊渡假赌尊渡假赌
熱門文章
擊敗分裂小說需要多長時間？
3 週前
By DDD
倉庫：如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險：如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？
3 週前
By 王林
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
1 週前
By 尊渡假赌尊渡假赌尊渡假赌
熱門文章標籤
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
＆lt; iframe＆gt;的目的是什麼。 標籤？使用時的安全考慮是什麼？
Mar 20, 2025 pm 06:05 PM
＆lt; iframe＆gt;的目的是什麼。 標籤？使用時的安全考慮是什麼？
我如何使用html5＆lt; meter＆gt; 要在範圍內顯示數值數據的元素？
Mar 12, 2025 pm 04:08 PM
我如何使用html5＆lt; meter＆gt; 要在範圍內顯示數值數據的元素？
