webpack 实践笔记（一）--- 入门

时间 2019-11-09

标签 webpack 实践笔记入门繁體版

原文原文链接

webpack 实践笔记入门（一）

[webpack官网文档地址]:（http://webpack.github.io/docs...）

[实践工程地址]: (https://github.com/silence717... )

本篇文章可切换到分支 step1查看源代码。javascript

what is webpack?

官网对webpack的定义是MODULE BUNDLER，目的就是把有依赖关系的各类文件打包成一系列的静态资源。html

简单分步实践

建立一个空文件夹，进入

cd /Users/silence/code/personal/webpack-practice

全局安装 webpack

npm install webpack -g

建立index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack-practice</title>
</head>
<body>

</body>
</html>

建立app.js

document.write('hello world!');
console.log('App loaded');

执行webpack命令

webpack ./app.js ./bundle.js

这个时候项目中多了一个bundle.js文件，使用script标签将其引入到index.html中java

<script src="bundle.js"></script>

在浏览器中打开index.html文件，页面出现 hello world! 文字。webpack

动态打包文件

在正常开发过程当中咱们不断在修改app.js文件，因此得不断执行打包命令，这样及其不方便。
咱们须要针对咱们的修改及时做出响应处理。git

为此建立一个webpack.config.js文件。github

module.exports = {
    entry: ['./app.js'],
    output: {
        filename: 'bundle.js'
    }
};

entry：入口文件使用哪一个文件做为项目的入口web

output：出口文件打包后的文件放在哪里npm

1、使用watch模式：

webpack 提供了一个命令--watch，一直监听文件，只要有变化就自动执行打包命令。这样会有两个问题：浏览器

* 1. 咱们访问的地址为本地文件地址。
* 2. 浏览器不能自动刷新。

2、 webpack-dev-server

为了在开发过程当中优化开发体验，webpack提供了一个webpack-dev-serverbash

全局安装

npm install webpack-dev-server

使用webpack-dev-server启动

webpack-dev-server

命令行出现

http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from /Users/silence/code/personal/webpack
Hash: 3786f12b06517d34cf85
Version: webpack 1.13.2

按照提示在浏览器中访问： http://localhost:8080/webpack... ，
如愿出现hello world！字样。

在app.js中随意更改输出内容并保存，会看到浏览器自动刷新并输出更改后的内容。

build多个文件

有两种解决方案

1 使用require.js，引入新模块到app.js中

建立login.js，文件内容：

console.log('login in');

在app.js中引入

require('./login');

备注一下，webpack原生支持commonJs规范。
运行dev-server，console中输出login.js的文件内容.

2. 在webpack-config.js中更改entry

建立utils.js文件，内容为：

console.log('utils.js file ...');

修改entry的配置为：

entry: ['./app.js', './utils.js'],

运行dev-server，console中输出utils.js的文件内容。

这就是webpacj的入门级使用，我的体验