一 webpack 初识

DEMO

初始化

  mkdir webpack-test
  cd webpack-test
  npm init
  npm install webpack  --save-dev

创建 hello.js hello.css

hello.js

// require('style-loader!css-loader!./hello.css')
require('./hello.css')

function hello(str) {
    alert(str);
}

hello('hello world')
hello.css

html, body {
    background-color: red;
}

执行webpack生成命令

 // webpack hello.js -o ./dist/hello_bundle.js --watch
 webpack hello.js -o ./dist/hello_bundle.js --module-bind 'css=style-loader!css-loader' --watch

看效果,创建一个index.html

<!DOCTYPE html>
<html>
<head>
    <title>webpack-test</title>
</head>
<body>
    <script type="text/javascript" src="./dist/hello_bundle.js"></script>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 失眠到凌晨。 光怪陆离的梦,奇奇怪怪的心情。 坐在办公桌前又矫情的觉得支撑不住想要逃避了。
    Anges阅读 215评论 0 0
  • 人活着本身就是一个矛盾体,会遇到很多参差不齐的,五花八门的,你无法解决但是就是困扰你的问题。问题的产生是你在这个世...
    应小枫子阅读 276评论 0 1
  • 诗歌难教,这是一线语文老师的共识,尤其是现代诗。 幸好,中招考试不考现代诗。初中语文教材中的古代诗歌大家都耳熟能详...
    今夜有风3阅读 876评论 2 15
  • 1 问题 项目中需要动态改变页面的 favicon,icon 文件存储在阿里云(OSS)上。改变 favicon ...
    唯泥Bernie阅读 1,401评论 0 0
  • 今天读得书很温暖,也很糟心,《新家庭如何塑造人》。婚姻实在是太不容易了,特别是我们中国式的婚姻,你嫁的或取的是对方...
    一溪风月阅读 318评论 1 6