Home > Web Front-end > HTML Tutorial > webpack基础_html/css_WEB-ITnose

webpack基础_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Release: 2016-06-21 08:55:11
Original
1214 people have browsed it

转载请注明出处:

安装

1.全局:

npm install -g webpack
Copy after login

2.项目:

npm install webpack --save-dev
Copy after login

3. 添加 content.js

module.exports = 'It workd from content.js'
Copy after login

4. 添加入口文件 entry.js

console.log(require('./content.js'))
Copy after login

5. 编译文件打包

webpack ./entry.js bundle.js
Copy after login

6. index.html引入 bundle.js

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8"></head><body><script src="bundle.js"></script></body></html>
Copy after login

7. 查看结果

输出

It workd from content.js
Copy after login

使用Loader加载css

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

npm install css-loader style-loader
Copy after login

1 新建 style.css

body {    background-color: yellow;}
Copy after login

2 入口文件引入 style.css

console.log(require('./content.js'))require('!style!css!./style.css')
Copy after login

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

绑定Loader

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

webpack ./entry.js bundle.js --module-bind "css=style!css"
Copy after login

此时 entry.js可以简化

require('./style.css')
Copy after login

配置文件

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

module.exports = {    entry: './entry.js',    output: {}}
Copy after login

Related labels:
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template