webpack概念&安装&配置

发布 : 2016-11-09 分类 : 大前端 浏览 :

1.npm配置国内源

1.1.安装cnpm命令

1
npm install -g cnpm --registry=https://registry.npm.taobao.org

1.2.永久使用镜像命令

1
npm config set registry https://registry.npm.taobao.org

2.为什么要使用webpack

1
2
3
4
1.模块化
2.编译工作：less -> css、sass -> css、es6 -> es5、typescript -> javascript
3.可以完成gulp和grunt的工作
4.自带服务器，基于node的服务器(热更新：代码修改完毕自动更新)

2.1.什么是webpack

1
2
3
4
5
webpack可以看做是模块打包机：

它做的事情是，分析你的项目结构，
找到Javascript模块以及其他的一些浏览器不能直接运行的拓展语言(Es6,Less,Scss,TypeScript等)，
并将其打包为合适的格式以供浏览器使用

3.安装webpack

准备工作

1
2
3
4
5
6
7
使用npm init命令可以自动创建package.json文件
package.json文件是一个标准的npm说明文件，里面蕴含了丰富的信息，
包括当前项目的依赖模块，自定义的脚本任务等

输入这个命令后，终端会问你一系列如项目名称，项目描述，作者等信息，
如果你不准备在npm中不发布你的模块，这些问题的答案都不重要
新建一个空的文件夹，cd进入后可以执行下述指令完成安装

3.1.全局安装webpack

1
npm install -g webpack

Markdown

3.2.创建项目

Markdown

3.3.初始化package.json文件

1
npm init

Markdown

Markdown

3.4.安装当前项目依赖

1
cnpm install webpack --save-dev

Markdown

Markdown

4.webpack模块化

4.1.创建两个文件夹app、build

1
2
mkdir app
mkdir build
1
2
app放置源代码
build放置编译之后的输出路径

Markdown

4.2.在app目录下创建app.js、hello.js文件

Markdown

4.2.1.app.js

1
作为主入口文件
1
2
3
// 引入hello.js
var hello = require("./hello.js")
document.getElementById("root").appendChild(hello());

4.2.1.hello.js

1
2
3
4
5
module.exports = function(){
  var hello = document.createElement("div");
  hello.textContent = "hello webapck";
  return hello
}

4.2.2.index.html

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>webpack</title>
  </head>
  <body>
    <!-- 根容器 -->
    <div id="root"></div>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

4.3.使用webpack进行编译

1
2
webpack 路径/入口文件 路径/出口文件
webpack app/app.js build/bundle.js

Markdown

Markdown

5.webpack配置文件编写：webpack.config.js

Markdown

1
2
3
4
5
1.在根目录编写webpack.config.js
2.entry:入口文件
3.output：出口文件
    __dirname:nodejs中的一个方法，来获取当前路径
    filename:指定输出名称

5.1.webpack.config.js

1
2
3
4
5
6
7
module.exports = {
  entry : __dirname + "/app/app.js",
  output : {
    path : __dirname + "/build",
    filename : "bundle.js"
  }
}

5.2.在命令行执行webpack

1
webpack

Markdown

5.3.生成错误信息文件

5.3.1.配置webpack.config.js文件

5.3.2.添加devtool:”eval-source-map”

1
2
3
4
5
6
7
8
module.exports = {
  devtool: "eval-source-map",
  entry : __dirname + "/app/app.js",
  output : {
    path : __dirname + "/build",
    filename : "bundle.js"
  }
}

6.快捷执行方式

1
2
3
4
5
注意：以下配置是在package.json中书写
"scripts":{
  "start":"webpack"
}
执行：npm start

6.1.修改package.json文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start":"webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^2.6.1"
  }
}

6.2.快捷执行命令

1
npm start

Markdown

7.创建webpack服务器

1
注意：webpack的默认端口是8080

7.1.安装全局webpack服务器

1
cnpm install -g webpack-dev-server

Markdown

7.2.安装项目依赖命令

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

Markdown

Markdown

7.3.运行webpack服务器

1
webpack-dev-server

Markdown

Markdown

7.4.配置webpack服务器

1
2
在package.json文件中添加
"build": "webpack-dev-server"

7.4.1.package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack",
    "build": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}

7.5.启动服务器

1
npm run build

Markdown

7.6.配置热更新(重要)

1
2
#指定打开的目录并在线热更新(一旦代码有修改，自动更新，不用手动刷新)
webpack-dev-server --content-base build --inline --hot

Markdown

7.6.1.在package.json文件中配置热更新命令

1
2
在package.json文件中添加
"build": "webpack-dev-server --content-base build --inline --hot"

7.6.1.1.packeage.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack",
    "build": "webpack-dev-server --content-base build --inline --hot"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}

Markdown

7.6.1.2.启动webpack服务器

1
npm run build

Markdown

7.7.服务器配置

1
2
3
4
content-base:默认路径的文件
port:端口，默认8080端口
color:在控制台可以看到不一样的颜色
inline:主动刷新页面

8.loaders

1
2
3
4
5
6
loaders是webpack可以通过配置脚本，或者外部依赖来执行一些功能
例如：
es6 -> es5
sass -> css
less -> css
的转换

8.1.配置loaders文件

1
2
3
1.test：一个匹配loaders要操作的文件的一个正则表达式(必须)
2.loader：loader要执行的任务的名字(必须)
3.query：为loader提供一些外部选项配置

8.2.json格式的数据转换成js对象

8.2.1.安装：json-loader作为依赖

1
cnpm install json-loader --save-dev

Markdown

Markdown

8.2.2.在webpack.config.js文件中配置loader

8.2.2.1.webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module.exports = {
  devtool: "eval-source-map",
  entry : __dirname + "/app/app.js",
  output : {
    path : __dirname + "/build",
    filename : "bundle.js"
  },
  // loaders的配置
  module:{
    loaders:[
      {
        "test":/\.json$/,
        "loader":"json-loader"
      }
    ]
  }
}

8.2.3.创建json格式的文件

8.2.3.1.data.json
1
2
3
4
5
6
7
8
{
  "name":"matrix",
  "age":18,
  "info":{
    "work":"actor",
    "workage":"30"
  }
}

Markdown

8.2.3.1.hello.js
1
2
3
4
5
6
7
// 引入data.json文件
var Data = require("./data.json");
module.exports = function(){
  var hello = document.createElement("div");
  hello.textContent = Data.name + "," + Data.age + "," + Data.info.work + "," + Data.info.workage;
  return hello
}

Markdown

Markdown

本文作者 : Matrix
原文链接 : https://matrixsparse.github.io/2016/11/09/webpack概念&安装&配置/
版权声明 : 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处！

知识 & 情怀 | 二者兼得

微信扫一扫, 向我投食

微信扫一扫, 向我投食

支付宝扫一扫, 向我投食

支付宝扫一扫, 向我投食

标签: #大前端 #webpack
留下足迹