webpack

Webpack 使用介绍, 以及与gulp的搭配(顺带css-sprite)

一小时包教会 —— webpack 入门指南

阮一峰 webpack-demos

webpack学习笔记

入门指迷

webpack 怎么用

关于配置的注释

关于代码热替换

Webpack-dev-server结合后端服务器的热替换配置

Webpack 性能优化 （一）（使用别名做重定向） 备份网址

webpack使用优化

视频教程(需要翻墙)

  1. https://www.youtube.com/watch?v=TaWKUpahFZM

  2. https://www.youtube.com/watch?v=RKqRj3VgR_c

关于第一个视频的笔记

开始

建立一个 learn-webpack的文件夹

这里用到了cnpm 淘宝 NPM 镜像
cnpm install -g webpack

npm init 一路回车

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "name": "learn-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {},
  "scripts": {
    "start": "webpack ./index.js bundle.js"
  },
  "author": "",
  "license": "ISC"
}

新建一个index.html

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>learn-webpack</title>
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

新建indiex.js

1
console.log('hello');

控制台执行

1
npm start

就会把 index.js 编译成 bundle.js。 打开 index.html 就会看到控制台输出。

模块

再新建一个文件bear.js

1
module.exports = 'growl!'

修改index.js

1
console.log(require('./bear.js'));

控制台再执行

1
npm start

修改后自动更新

每次修改文件后都要 npm start 一下，这样好麻烦。
安装 webpack-dev-server

1
cnpm install webpack-dev-server --save-dev

然后修改 package.json 中 script 的内容

1
webpack ./index.js bundle.js

修改为

1
webpack-dev-server ./index.js

接着

1
npm start

访问：http://localhost:8080/webpack-dev-server/
这样每次修改了 index.js ，浏览器就会自动刷新。

样式

需要安装两个模块

1
cnpm install css-loader --save-dev

1
cnpm install style-loader --save-dev

然后新建bear.css文件

1
2
3
div{
     color:red;
}

index.js 后面加一句

1
2
3
console.log(  require('./bear.js'));

require('style!css!./bear.css');//在html中 以内联style的方式载入bear.css

css 中 还可以 @import其他的css
如在bear.css 中

1
2
3
4
@import 'base.css'; /*这里的分号不要忘记了*/
div{
     color:red;
}

这样就包括了 base.css

swebpack.config.js

新建 webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
     entry:'./index.js',
     output:{
          path: __dirname,
          filename: 'bundle.js'
     },
     module:{
          loaders:[
          { test: /\.css$/,loader:'style!css!'}
          ]
     }
}

这样设置后
就可以将 index.js 中的

1
require('style!css!./bear.css');

改为

1
require('./bear.css');

接着再次

1
npm start