首页 > 代码库 > webpack笔记
webpack笔记
常用命令
//当项目逐渐变大,webpack 的编译时间会变长,通过参数让编译的输出内容带有进度和颜色$ webpack --progress --colors//如果不想每次修改模块后都重新编译,那么可以启动监听模式。开启监听模式后,没有变化的模块会在编译后缓存到内存中,而不会每次都被重新编译,所以监听模式的整体速度是很快的。$ webpack --progress --colors --watch//启动一个 express 静态资源 web 服务器,它将在 localhost:8080 ,并且会监听模式运行 webpack,在浏览器打开 http://localhost:8080/ //或http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出,并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。//安装$ npm install webpack-dev-server -g//运行$ webpack-dev-server --progress --colors
http://webpackdoc.com/loader.html
ps:
1、
# 有些环境下可能需要使用双引号$ webpack entry.js bundle.js --module-bind "css=style!css"
接上一节的例子,我们要在页面中引入一个 CSS 文件 style.css,首页将 style.css 也看成是一个模块,然后用 css-loader
来读取它,再用 style-loader
把它插入到页面中。
/* style.css */body { background: yellow; }
修改 entry.js:
require("!style!css!./style.css") // 载入 style.cssdocument.write(‘It works.‘)document.write(require(‘./module.js‘))
安装 loader:
npm install css-loader style-loader
重新编译打包,刷新页面,就可以看到黄色的页面背景了。
如果每次 require
CSS 文件的时候都要写 loader 前缀,是一件很繁琐的事情。我们可以根据模块类型(扩展名)来自动绑定需要的 loader。
将 entry.js 中的 require("!style!css!./style.css")
修改为 require("./style.css")
,然后执行:
$ webpack entry.js bundle.js --module-bind ‘css=style!css‘# 有些环境下可能需要使用双引号$ webpack entry.js bundle.js --module-bind "css=style!css"
webpack笔记
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。