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

2024年2月10日 205次阅读 来源: silence

webpack 实践笔记入门（一）

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

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

本篇文章可切换到分支 step1检察源代码。

what is webpack?

官网对webpack的定义是MODULE BUNDLER，目标就是把有依靠关联的种种文件打包成一系列的静态资本。

简朴分步实践

建立一个空文件夹，进入

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中

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

在浏览器中翻开index.html文件，页面涌现 hello world! 笔墨。

动态打包文件

在一般开辟过程当中我们不停在修正app.js文件，所以得不停实行打包敕令，如许及其不方便。
我们须要针对我们的修正实时作出相应处置惩罚。

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

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

entry： 进口文件 运用哪一个文件作为项目标进口

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

一、 运用watch形式：

webpack 供应了一个敕令–watch，一向监听文件，只需有变化就自动实行打包敕令。如许会有两个题目：


* 1. 我们接见的地点为当地文件地点。
* 2. 浏览器不能自动革新。
二、 webpack-dev-server

为了在开辟过程当中优化开辟体验，webpack供应了一个webpack-dev-server

全局装置
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的入门级运用，个人体验

    原文作者：silence
    原文地址: https://segmentfault.com/a/1190000006928799
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞