Heim > Web-Frontend > HTML-Tutorial > webpack基础_html/css_WEB-ITnose

webpack基础_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Freigeben: 2016-06-21 08:55:11
Original
1202 Leute haben es durchsucht

转载请注明出处:

安装

1.全局:

npm install -g webpack
Nach dem Login kopieren

2.项目:

npm install webpack --save-dev
Nach dem Login kopieren

3. 添加 content.js

module.exports = 'It workd from content.js'
Nach dem Login kopieren

4. 添加入口文件 entry.js

console.log(require('./content.js'))
Nach dem Login kopieren

5. 编译文件打包

webpack ./entry.js bundle.js
Nach dem Login kopieren

6. index.html引入 bundle.js

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8"></head><body><script src="bundle.js"></script></body></html>
Nach dem Login kopieren

7. 查看结果

输出

It workd from content.js
Nach dem Login kopieren

使用Loader加载css

webpack默认只支持js模块, 要打包css文件需要使用 css-loader处理css文件, style-loader应用样式

npm install css-loader style-loader
Nach dem Login kopieren

1 新建 style.css

body {    background-color: yellow;}
Nach dem Login kopieren

2 入口文件引入 style.css

console.log(require('./content.js'))require('!style!css!./style.css')
Nach dem Login kopieren

3 重新编译, 打开html文件, 样式已经加载

绑定Loader

require('!style!css!./style.css')每次都写很长的加载器前缀很麻烦, 可以在编译命令指定加载器绑定到文件后缀名

webpack ./entry.js bundle.js --module-bind "css=style!css"
Nach dem Login kopieren

此时 entry.js可以简化

require('./style.css')
Nach dem Login kopieren

配置文件

将配置信息添加到 webpack.config.js配置文件后, 每次只需要执行 webpack即可完成打包任务

module.exports = {    entry: './entry.js',    output: {}}
Nach dem Login kopieren

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage