首页 > 代码库 > 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笔记