webpack介绍和安装

2017/02/11 1,651 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

webpack介绍和安装

Leave a Reply Cancel

Categories