webpack简介
webpack是静态模块打包工具,分析翻译,压缩,打包代码
-
支持所有类型文件的打包
-
支持less/sass=>css
-
支持ES6/7/8=>ES5
-
压缩代码,提高加载速度
安装webpack
npm install webpack -g npm install webpack-cli -g
测试安装成功
webpack -v webpack-cli -v
使用webpack
-
创建一个空的文件夹,然后在ider中打开,该文件夹就会被ider中所管理
-
创建一个名为modules的目录,用于防止JS模块等资源文件
-
在modiles下创建js文件即可
//暴露一个方法:sayHi exports.sayHi = function(){ document.write("<div>Hello webpack</div>"); };
-
在modules下创建一个名为main.js的入口文件,用于打包时设置entry属性
//require 导入一个模块,就可以调用这个模块中的方法了 var hello = require("/hello"); hello.sayHi();
-
在项目目录下创建webpack.config.js配置文件使用webpack命令打包
注意: 使用webpack打包时,有可能会发生错误,这时请使用npx webpack打包
webpack.config.js的代码
// 将模块导出 module.exports = { // 入口文件,指定WebPack用那个文件作为项目的入口 entry:'./modules/main.js', // 输出,指定WebPack把处理完成的文件防止到指定路径 output: { // 打包后指定js文件的路径和包名 filename:"./js/bundle.js" } };
打包成功后出现一个文件夹
6.在目录上创建一个html ,导入我们打包后的js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--导入打包成功路径的js 前端的模块化开发--> <script src="dist/js/bundle.js"> </script> </body> </html>
点击以下任意浏览器就可完成页面
出现以下页面我们的webpack项目就完成了