webpack笔记

Posted 2020-08-09 刘金宇

常用命令

//当项目逐渐变大，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.css
document.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"