社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
一直用vue脚架自动生成项目,但其他最主要的webpack是怎么搭建的,怎么编译 怎么构建 估计很少人会去关注,做个webpack的记录和见解,我们先通过一个图片来认识webpack;
这个图片基本就把webpack的功能介绍出来了
安装webpack配置 npm init 初始化生成package.json
文件 需要你填写相关项目的信息 而通过npm init -y 可以生成一个默认的
npm install -g webpack 全局安装webpack
npm init npm install webpack --save 通过npm把webpack的依赖导入项目中
4.x
的版本把cli分离出来了,所以必需安装webpack-cli
npm install --save-dev webpack-cli 或者 npm install -D webpack-cli
验证是否安装成功:webpack -v,如果出现下面报错
执行一下 npm install -g webpack-cli
就可以了 现在我们就可以开始玩起来了。
webpack
的工作都是通过配置文件完成的。编译哪个文件、怎么编译、编译成什么样、输出为什么等等,所有的操作都是按配置文件里的内容来完成的,webapck
想要运行的话配置文件是必不可少的东西。通常我们都是在webpack.config.js文件进行配置,采用CommonJS
的规范,用moudle.exports
导出
配置文件有6个核心的东西组成
entry
:入口文件(就跟页面的index,从什么地方开始)output
:出口文件(这个就是告诉要把这些东西放到什么地方去)module
:模块(放lorder,编译浏览器不认识的东西,一些第三方的控件,比如压缩,sass)plugins
:插件(辅助开发,提高开发效率,)devServer
:服务器(webpack提供的本地服务器 可以直接本地修改映射到浏览器 同步更新 而不用在按刷新)mode
:模式,分为开发模式、生产模式。此为4.X里新增的创建一个小demo,目录结构如下
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="box">
</div>
</body>
</html>
//js/index.js
window.onload = ()=>{
const box = document.querySelector('.box');
box.innerHTML = '1231231';
}
//webpack.config.js
const path = require('path'); //nodejs的语法,引入路径模块,为了输出的时候找绝对路径
module.exports = {
entry: './js/index.js', //入口文件为main.js
output: { //输出
path: path.resolve(__dirname, 'dist'), //path.resolve为nodejs的固定语法,用于找到当前文件的绝对路径
filename: 'bundle.js' //输出的文件名
},
}
对应的代码如上图 ,打开命令窗口 执行 webpack 会自动去查找 webpack.config.js文件,执行里面的配置
如果执行了webpack报错 先执行一下 npm i --save-dev webpack,在重新执行webpack
在目录我们可以看到一个新的文件夹 dist
引入的话可以看到为我们刚才在index.js写的效果是一样的
这个就是最简单的webpack运行
官网文档 https://www.webpackjs.com/concepts/entry-points/
webpack
把打包后的文件叫Chunck
output
选项可以控制 webpack 如何向硬盘写入编译文件。注意,即使可以存在多个入口
起点,但只指定一个输出
配置
filename
用于输出文件的文件名。字符串path
的绝对路径。 __dirname
是nodejs
里的一个模块,表示当前文件的绝对路径 通过引入path模块 通过resolve来定义绝对路径 path.resolve(__dirname,'输出文件的路径')
;目录的话 就是在JS文件夹里多添加了一个文件two.js文件
数组形式 :
可以看出webpack
会把数组里所有文件打包成一个js文件
对象格式
webpack
会把对象里的文件分别打包成多个文件
更加详情的配置请到webpack官网查询
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!