WEBPACK简单学习笔记
入门
简介
webpack是一个module bundler，个包含前端的项目，里面可能有多个 .js, 多个 .css , 多个静态图片， 多个其他前端资源。
一些 js 资源彼此之前存在依赖关系，当一个页面需要加载多个 .js 的话，也会拖累整个页面的加载速度。
所以为了解决这个问题， 如图所示，webpack 就把左边的各种各样的静态资源，打包成了一个所谓的 assets. 这样浏览器加载起来就快多了。
安装 webpack
创建一个项目目录：
E:\project\webapack_demo
- 1
用镜像方式全局安装webpack：
cnpm install -g webpack@1.13.2
- 1
之前已经装过了，所以直接运行：
webpack
- 1
一堆参数，OK，webpack安装完成。
入门实例
在项目目录下建立一个a.js，输出“Hello webpack”。
document.write("hello webpack");
- 1
运行打包命令：
webpack a.js bundle.js
- 1
这样a.js就被打包到了bundle.js中
index.html中引用bundle.js：
<html> <head> <script src="bundle.js"></script> </head>
</html>
- 1
- 2
- 3
- 4
- 5
直接用浏览器打开index.html,
配置文件方式
上一个方式是把a.js打包，可以直接采用配置的方式。
webpack.config.js：
module.exports = {
entry: './a.js',
output: { filename: 'bundle.js'
}
};
- 1
- 2
- 3
- 4
- 5
- 6
再次运行：
直接就可以访问，和上一个效果一样。
webpack-dev-server
在前面是直接打开html，接下来用的webpack-dex-server是启动一个服务器的方式，从服务器上打开index.html。
安装
ebpack 是用 cnpm 安装的 1.32.2，考虑到兼容性， webpack-dev-server 也不会安装最新版本，而是与之兼容的版本： webpack-dev-server@1.15.0。
运行如下命令进行全局安装
cnpm install -g webpack-dev-server@1.15.0
- 1
运行
webpack-dev-server --open
- 1
会自动打开与 http 协议关联的浏览器，并显示默认的 index.html 页面。
热更新
webpack-dev-server 支持热更新。 所谓的热更新，即在 webpack.config.js 中的 entry 文件 ( a.js ) 发生了改变之后，会自动运行 webpack, 并且自动刷新页面，立即看到修改之后的效果。
为了做到这一点，需要修改 webpack.config.js 文件。
var webpack = require('webpack')
- 1
因为 webpack 模块是全局的，在某些情况下，通过这种方式导入不能够被识别，需要进行一次链接：
npm link webpack
- 1
不然，
把 webpack.config.js 文件的内容更新：
var webpack = require('webpack')
module.exports = { entry: './a.js', output: { filename: 'bundle.js' }, plugins:[ new webpack.HotModuleReplacementPlugin() ], devServer: { port:8088, inline:true, hot:true }
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
重新启动，
修改a.js中的内容，可以实时看到浏览器更新。
npm 方式启动
前面的方式，是直接运行 webpack-dev-server 的方式，不过大都数的项目，都会通过npm 的方式运行。
初始化
运行如下命令进行 package.json 配置文件的初始化
npm init -y
- 1
-y 的意思是都同意~ 就不用挨个挨个手动敲打回车了
增加脚本
在package.json中增加脚本：“dev”: "webpack-dev-server --open"
{
"name": "webpack-demo",
"version": "1.0.0",
"main": "a.js",
"scripts": { "dev": "webpack-dev-server --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": { "webpack": "^1.13.2"
},
"devDependencies": {},
"description": ""
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
运行
访问
访问测试地址：http://localhost:8088/
多个入口文件
有时候，会不止一个js文件，这时候就需要配置多个入口文件。
修改a.js:
document.write("hello webpack from a.js<br>");
- 1
新建b.js:
document.write("hello webpack from b.js<br>");
- 1
修改配置文件webpack.config.js:
module.exports = { entry: { bundle1: './a.js', bundle2: './b.js' }, output: { filename: '[name].js' }, devServer: { port:8088 }
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
修改 index.html:
分别引用两个打包后的文件：
<html> <head> <script src="bundle1.js"></script> <script src="bundle2.js"></script> </head>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
运行测试：
BABEL-LOADER
ES6
ES6 的全称是 ECMAScript 6.0，是下一代的 javascript 语言标准。
因为当前 javascript 标准 (ES5) 对于开发大型的 javascritp 应用支持力度不足够，所以才会推出一个 ES6，期望 js 在大型企业开发领域也有所斩获。(这玩意儿以前真没见过）
babel 安装
运行如下命令进行安装。
npm install --save-dev babel-loader@6.2.7 babel-core@6.18.0 babel-preset-latest@6.24.1
- 1
a.js
语法使用 ES6 的写法，这个是无法直接在 浏览器使用的，需要转换为 ES5 才能够使用。
const name = 'ES6'
document.write(`hello ${name}`)
- 1
- 2
package.config.js
module.exports = { entry: './a.js', //入口 output: { filename: 'bundle.js' //出口 }, devServer: { port:8088 }, module: { loaders: [ { test: /\.js$/, //表示仅仅转换 .js 文件 loader: 'babel', //使用babel loader进行 es6 转换 query:{ presets: ['latest'] //latest 表示用最新的语法规则进行 } } ] }
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
index.html
html> <head> <script src="bundle.js"></script> </head>
</html>
- 1
- 2
- 3
- 4
- 5
运行 webpack
首先运行 webpack, 会把 a.js 转换为 bundle.js 。
运行
npm run dev
- 1
行,webpack先搞到这吧。见过两三次，还真没用过，以后用到的时候再接着学。
webpack中文文档
参考：
【1】、http://how2j.cn/k/webpack/webpack-start/1776.html
【2】、http://how2j.cn/k/webpack/webpack-config/1777.html
【3】、http://how2j.cn/k/webpack/webpack-npm/1783.html
【4】、http://how2j.cn/k/webpack/webpack-webpack-dev-server/1778.html
【5】、http://how2j.cn/k/webpack/webpack-multiple-entry/1779.html
【6】、http://how2j.cn/k/webpack/webpack-babal-loader/1780.html
文章来源: blog.csdn.net，作者：三分恶，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/sinat_40770656/article/details/97279039
- 点赞
- 收藏
- 关注作者
评论（0）