497   CSS JS webpack

webpack介绍和安装

如果是小型web前端,应该很少用到webpack!那么webpack在大型web前端中,究竟是起到什么作用了?

一图胜千言!

http://webpack.github.io/assets/what-is-webpack.png

1,以前端JS为例子,由于功能需求,引用了许多依赖包,如何将这些包管理以及加载了?
2,现在样式编写多数使用LESS,SCSS等动态语言方式,总得需要一个预编译翻译成CSS吧,有时还得对前端模板jade预编译吧!
3,开发和生产环境的代码往往都是同一套,测试得不断重复刷新浏览器!有没想过各种环境代码隔离,以及利用热加载方式,你只需修改代码,浏览器自动刷新效果!

说到这里,你应该对webpack有了大概的了解,简单概括:
webpack是一个前端资源管理和开发测试工具,它可以管理各种前端资源包括js,css,img,以及less,jade等,通过打包方式集合到一起;它还能将开发、生产环境的代码隔离,同时提供热加载方式更新代码到浏览器,方便开发测试。

 

Talk is cheap, show me the code

 

以下讲解默认你已经接触过nodejs,npm,否则请先移步这里

一, 安装 webpack

$ npm install webpack -g
$ webpack -h

 

二,测试 webpack 打包前端资源

 

1,打包js
新建首页文件 index.html,请注意这里的加载的js文件bundle.js

<!– index.html –>
<html>
<head>
<meta charset=”utf-8″>
</head>
<body>
<script src=”bundle.js”></script>
</body>
</html>

 

新建开发编写的js文件entry.js

// entry.js
document.write('Hello world');

 

开始打包js文件到bundle.js

$ webpack entry.js bundle.js

Hash: 6e968b384c5f03fea32f
Version: webpack 2.2.1
Time: 40ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.55 kB       0  [emitted]  main
   [0] ./entry.js 43 bytes {0} [built]

 

查看首页文件index.html,就能看到Hello world了

因为webpack本身就是js包,所以能打包js文件,但对于其他类型文件比如css,就需要单独的loader来实现打包和加载了

 

2,打包css

安装css的loader

$ npm install css-loader style-loader

 

新建样式文件style.css

/* style.css */
body { background: red; }

 

修改entry.js,使用样式文件

require("./style.css") // 载入 style.css
document.write('Hello world')

 

打包js和css

$ webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'
Hash: f4ea7a646eba6fff9a88
Version: webpack 2.2.1
Time: 655ms
    Asset     Size  Chunks             Chunk Names
bundle.js  12.2 kB       0  [emitted]  main
   [0] ./~/style-loader!./~/css-loader!./style.css 895 bytes {0} [built]
   [1] ./~/css-loader!./style.css 197 bytes {0} [built]
   [2] ./~/css-loader/lib/css-base.js 1.46 kB {0} [built]
   [3] ./~/style-loader/addStyles.js 6.91 kB {0} [built]
   [4] ./entry.js 94 bytes {0} [built]

 

重新查看首页文件index.html,就能看到背景颜色变了

 

三,配置 webpack

 

上面通过命令输入参数打包感觉不大方便,所以就有了webpack的配置文件 webpack.config.js,它类似nodejs中的package.json格式!

1,新建 package.json 文件,添加webpack的依赖包

{
  "name": "test_webpack",
  "version": "1.0.0",
  "description": "",
  "main": "bundle.js",
  "dependencies": {
    "css-loader": "^0.26.2",
    "style-loader": "^0.13.2",
    "webpack": "^2.2.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

 

2,安装webpack的依赖包

npm install 

 

3,新建 webpack的配置文件 webpack.config.js

var webpack = require('webpack')

module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style-loader!css-loader'}
    ]
  }
}

 

4,配置webpack完毕,重新打包css和js,执行 webpack 即可,它会默认读取 webpack.config.js

$ webpack



Leave a Reply

Your email address will not be published. Required fields are marked *