smartzeng


完美起航

webpack的学习笔记

  • ~1.68K 字

首先webpack是一个模块打包机，本质上，webpack 是一个现代 JavaScript 应用程序的_静态模块打包器(module bundler)_。当 webpack 处理应用程序时，它会递归地构建一个_依赖关系图(dependency graph)_，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 _bundle_。

webpack的配置文件webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const path = require('path');

module.exports = {
    entry: './app/main.js', //配置入口文件位置
    output:{
        path: path.resolve(__dirname, 'dist'), //输出文件位置
        filename: 'bundle.js', //打包后的文件名称
        publicPath: 'public' //虚拟目录
    },
    module: {
        rules: [
            test: /\.jsx?$/，//匹配以js或jsx结尾的文件
            exclude: [
                path.resolve(__dirname, 'node_modules') //配置过滤目录
            ],
            loader: 'babel-loader', //配置loader加载器
            options: {
                preset: [es2015]
            }
        ]
    }
};

项目目录如下

blob.png

webpack-dev-server的使用，配置package.json， 

1
2
3
4
5
// package.json的scripts模块
"scripts": {
    "test": "node test.js",
    "server": "webpack-dev-server --content-base ./ --port 8000" //./指的项目入口文件的位置
},

使用npm run server启动webpack-dev-server。

index.js文件内容如下 

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue学习</title>
</head>
<body>
//根据webpack的配置文件引入打包后的bundle.js
<script src="public/bundle.js"></script>
</body>
</html>
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可