摘要：实践笔记入门一官网文档地址实践工程地址本篇文章可切换到分支查看源代码。简单分步实践创建一个空文件夹，进入全局安装创建文件创建执行命令这个时候项目中多了一个文件，使用标签将其引入到中在浏览器中打开文件，页面出现文字。
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文件
webpack-practice
创建app.js
document.write("hello world!");
console.log("App loaded");
执行webpack命令
webpack ./app.js ./bundle.js
这个时候项目中多了一个bundle.js文件，使用script标签将其引入到index.html中
在浏览器中打开index.html文件，页面出现 hello world! 文字。
动态打包文件在正常开发过程中我们不断在修改app.js文件，所以得不断执行打包命令，这样及其不方便。
我们需要针对我们的修改及时作出响应处理。
为此创建一个webpack.config.js文件。
module.exports = {
entry: ["./app.js"],
output: {
filename: "bundle.js"
}
};
entry： 入口文件 使用哪个文件作为项目的入口
output： 出口文件 打包后的文件放在哪里
webpack 提供了一个命令--watch，一直监听文件，只要有变化就自动执行打包命令。这样会有两个问题：
* 1. 我们访问的地址为本地文件地址。 * 2. 浏览器不能自动刷新。
为了在开发过程中优化开发体验，webpack提供了一个webpack-dev-server
npm install 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多个文件有两种解决方案
创建login.js，文件内容：
console.log("login in");
在app.js中引入
require("./login");
备注一下，webpack原生支持commonJs规范。
运行dev-server，console中输出login.js的文件内容.
创建utils.js文件，内容为：
console.log("utils.js file ...");
修改entry的配置为：
entry: ["./app.js", "./utils.js"],
运行dev-server，console中输出utils.js的文件内容。
这就是webpacj的入门级使用，个人体验
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/80372.html
摘要：编程书籍的整理和收集最近一直在学习深度学习和机器学习的东西，发现深入地去学习就需要不断的去提高自己算法和高数的能力然后也找了很多的书和文章，随着不断的学习，也整理了下自己的学习笔记准备分享出来给大家后续的文章和总结会继续分享，先分享一部分的 编程书籍的整理和收集 最近一直在学习deep learning深度学习和机器学习的东西，发现深入地去学习就需要不断的去提高自己算法和高数的能力然后...
摘要：前端日报精选了解中的全局对象和全局作用域张鑫旭鑫空间鑫生活子进程你应该知道的一切直出内存泄露问题的追查实践我他喵的到底要怎样才能在生产环境中用上模块化腾讯前端大会大咖说大咖干货，不再错过发布发布中文翻译在使用进行本地开发代码 2017-07-07 前端日报 精选 了解JS中的全局对象window.self和全局作用域self « 张鑫旭-鑫空间-鑫生活Node.js 子进程：你应该知道...
阅读 3529·2023-04-26 02:10
阅读 1206·2021-11-22 15:25
阅读 1625·2021-09-22 10:02
阅读 866·2021-09-06 15:02
阅读 3416·2019-08-30 15:55
阅读 567·2019-08-30 13:58
阅读 2714·2019-08-30 12:53
阅读 3008·2019-08-29 12:38
