webpack有什么用

可以帮助我们把多个js文件打包为1个入口文件，并且可以按需加载。也就是无需担心太多组件导致过多的http请求。同时webpack也可以编译.vue文件，如果没有使用一个loader去转换我们的.vue文件里的style、js、html，浏览器无法识别。

模块热加载

webpack的模块热加载可以为单页应用带来便利，当我们修改代码刷新页面后，应用里所有状态就都没有了，需要再重新跑一次。而模块热加载就是当你修改代码后，页面不会被刷新，状态也可以保留下来。

一.安装

1
2
3
4
5
6
7
//全局安装

npm install -g webpack

//安装到你的项目目录

npm install --save-dev webpack

二.使用

1.建立一个空文件夹，暂命名为webpack；

2.建立一个package.json的的npm说明文件，将用来记录当前项目的依赖模块，自定义脚本任务等。也可以在终端使用npm init自动建立；

。

4.文件对应的内容如下：

  • index.html文件只有最基础的html代码，它唯一的目的就是加载打包后的js文件（bundle.js）:
1
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Webpack Sample Project</title></head><body><div id='root'></div><script src="bundle.js"></script></body></html>
  • Greeter.js只包括一个用来返回包含问候信息的html元素的函数。
1
2
3
4
5
// Greeter.jsmodule.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};
  • main.js用来把Greeter模块返回的节点插入页面。
1
2
//main.js var greeter = require('./Greeter.js');
document.getElementById('root').appendChild(greeter());

5.通过配置文件来使用webpack

在当前的webpack文件夹下新建一个名为webpack.config.js的文件，内容如下(注意entry里的引用写法，这里跟原文有差):

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {

  entry:  "../webpack/app/main.js",//已多次提及的唯一入口文件

  output: {

    path:  "public",//打包后的文件存放的地方

    filename: "bundle.js"//打包后输出文件的文件名

  }

}

6.编译

在webpack文件夹下打开命令行，输入

webpack

编译成功后打开index.html就可以看到内容。

7.更快捷的打包方式

在package.json里进行配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "name": "package",
  "version": "1.0.0",
  "description": "test 1.0",
  "main": "index.js",
  "scripts": {
    "start": "webpack" //把npm的start命令指向webpack命令

  },
  "author": "Anchen",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^1.13.3"
  }
}

然后使用npm start 命令就可以，注意注释最后要去掉，否则会有一堆错误（亲测）。