webpack概念
webpack 是现代JavaScript应用程序的静态模块打包器(module bundler)
当webpack工作时,它会递归构建一个项目的依赖关系图,其中包含了每个应用程序需要的模块,然后将所有模块打包成一个或者多个bundle
安装
确定你已经安装了nodejs
Nodjs官网安装地址:http://nodejs.cn/
安装好后可以在可以在cmd窗口中查看
首先 创建一个文件并且进入文件
npm初始化文件 (建立package文件)
npm init -y
然后在当前目录下使用npm命令安装webpack 和webpack-cli
(安装到开发环境下)
npm i webpack webpack-cli -D
使用vscode或者其他工具 进入目录
这是安装好后的目录结构
接下来在目录中准备文件
创建mypack目录下的src目录,然后在src目录中创建对应的项目文件,以便后续的打包实验
(老实说 仿照vue目录结构就ok了)
具体目录结构如下:
然后在header.js中写入以下代码
// 创建一个节点
var elem = document.createElement('div');
// 设置内容
elem.innerHTML = '你好webpack';
// 导出节点
export default elem;
再去index.js文件中写入以下代码
// 导入header.js 的中的节点
import elem from './header.js';
// 将节点插入到页面
document.body.appendChild(elem);
两个文件代码写完以后,就可以试着去执行打包命令了
在cmd终端窗口中 执行npx webpack
npx webpack
执行命令后 就会发现 左边多出来一个dist目录,这个就是你打包后的文件,webpack会将index.js文件和header.js文件整合在一起生成main.js文件放在dist目录中,其中,webpack会压缩优化文件体积,
以下是打包后的main.js的内容
格式化一下main.js里的内容 (当然,这里只是为了演示,自己项目中千万别这么做,不然白压缩了)
能看到,整体是一个闭包函数,webpack将遍历名全部进行了简写(elem—>e),以此来尽可能的优化体积。
(() => { // 闭包
"use strict"; // 严格模式
var e = document.createElement("div"); // header.js中的elem
e.innerHTML = "你好webpack";
const n = e; // 相当于index.js中的import elem from './header.js';导入操作
document.body.appendChild(n)
})();
接下来 在dist目录下创建一个html文件:index.html
然后在index.html中引入main.js
引好后 就可以运行网页查看效果了
虽然运行出来了 但是可以发现 在运行npx webpack时,终端会有一个报错,这个问题怎么解决呢,接下来说说配置文件的问题
配置文件 webpack.config.js
在webpack.config.js中你可以配置webpack的各种设置,以达到最好用的状态。
在mypack目录中 创建一个名为webpack.config.js的JavaScript文件。并在其中写入以下代码
module.exports = {
// entry 入口路径
entry: './src/index.js',
// output 出口
output: {
// 出口文件名
filename: 'main.js',
// 出口位置
// __dirname: nodjs中代表当前目录(也就是mypack目录)
path: __dirname + '/dist'
},
// 模式
// production 产品模式
// development 开发模式
// 产品模式下打包后程序的体积要比开发模式的体积远远小得多
mode: 'production',
}
这样再运行npx webpack就不会有报错了
配置文件建都建了,那肯定不能只写这么点配置。
接下来 先试试不同的打包姿势。
在package.json文件中在scripts处添入以下代码
这样,你就可以使用以下两种方式进行打包了
npm run serve // 第一种
npm run build // 第二种
npm run serve这条命令在vue中能够启动服务器将项目跑起来,这样同样也可以,只不过需要亿点点的修改。
首先安装插件: webpack-dev-server
npm i webpack-dev-serve -D
安装好后,在webpack.config.js文件中配置这个服务器
devServer: {
// 自动打开浏览器
open: true,
// 本地域名
host: "localhost",
// 配置地址端口号
port: "8080",
// 开启热更新
hot: true,
}
然后在package.json文件中配置
"scripts": {
"build":"webpack",
"serve": "webpack serve", // 在serve中添加 serve
"test": "echo \"Error: no test specified\" && exit 1"
},
到这里以为就完成了?不不不,远远不够,我们还需要一个模板文件,vue项目中有一个public目录,这个很不错,拿过来,然后在public中建立一个index.html文件,像这样:
文件里写一个页面基本结构就行。
然后安装下一个插件:html-webpack-plugin
npm i html-webpack-plugin -D
这个插件主要用来做模板
然后在webpack.config.js中添加以下配置
// 导入html-webpack-plugin插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
plugins: [
// 实例化
new HtmlWebpackPlugin({
// 模板文件名
filename: 'index.html',
// 指定模板文件
template: './public/index.html',
})
],
}
整体配置文件
好了 现在试试运行 npm run serve 命令吧
就此 搞定。
当然 webpack的配置肯定不只是这些,还有各种优化处理,比如css文件的压缩优化,图片的压缩优化等等等等,但由于篇幅,接下来的自行探索吧~
webpack官方文档:https://www.webpackjs.com/concepts/
加油 冲!