webpack 入门

发表于 | 阅读次数

AMD

异步模块定义规范（Async Module Definition 简称AMD）制定了定义模块的规则，这样模块和模块的依赖可以被异步加载。 是 require.js 的作者发明的。其实只有一个主要接口 define(id?, dependencies?, factory)，它要在声明模块的时候指定所有的依赖 dependencies，并且还要当做形参传到 factory 中，对于依赖的模块提前执行，依赖前置。

1
// xxx.js
2
define(['jquery'],function(){
3
  return {}
4
})
5
6
require(['./xxx'],function(xxx){
7
  console.log(xxx)
8
})

CommonJS

CommonJS 是以在浏览器环境之外构建 JavaScript 生态系统为目标而产生的项目，比如在服务器和桌面环境中。服务器端的 Node.js 遵循 CommonJS 规范，该规范的核心思想是允许模块通过 require 方法来同步加载所要依赖的其他模块，然后通过 exports 或 module.exports 来导出需要暴露的接口。

1
// xxx.js
2
exports.name = 'frank'
3
exports.age = 18
4
5
// main.js
6
var xxx = require('./xxx.js')
7
xxx.name // 'frank'

ES6 模块

ECMAScript6 标准增加了 JavaScript 语言层面的模块体系定义。ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。

1
// xxx.js
2
let name = 'frank'
3
let age = 18
4
export name
5
export age
6
7
//main.js
8
import {name,age} form './xxx.js'

webpack

安装

1
npm init -y // 创建 package.json
2
npm i -D webpack
1
// app.js
2
import bar from './bar';
3
bar();
4
console.log('hello webpack');
5
6
// bar.js
7
export default function bar() {
8
  //
9
}
10
11
// webpack.config.js
12
module.exports = {
13
  entry: './app.js',
14
  output: {
15
    filename: 'bundle.js'
16
  }
17
}
18
19
// page.html
20
<html>
21
  <head>
22
  <title>webpack-demo</title>
23
  </head>
24
  <body>
25
    <script src="bundle.js"></script>
26
  </body>
27
</html>

运行 webpack，我们安装的项目文件下，运行 node_modules/.bin/webpack
控制台就会打出 hello webpack

可以用 webpack 加载 CSS

1
// webpack.config.js
2
module.exports = {
3
  entry: './src/home.js',
4
  output: {
5
    filename: './dist/bundle.js'
6
  }
7
  module:{
8
    rules:[
9
      {
10
        test:/\.css$/,
11
        use:['style-loader','css-loader','autoprefixer-loader'] 
12
      }
13
    ]
14
  }
15
}
16
17
//home.js
18
import './home.css'
1
webpack -w // 实时更新
2
webpack -p // 压缩

一般把这两个命令和 webpack 命令放在 package.json 里，如下

1
"scripts":{
2
  "build":"webpack",
3
  "watch":"webpack -w",
4
  "deploy":"webpack -p"
5
}

运行 npm run build 命令执行 webpack
运行 npm run watch 命令执行 webpack -w
运行 npm run deploy 命令执行 webpack -p