自我做t恤的网站,网络架构拓扑,seo搜索引擎优化工资多少钱,合肥有什么好的网站建设公司文章目录 一文大白话讲清楚webpack基本使用——1——完成webpack的初步构建1. 先回忆webpack是个啥2. webpack四大核心2.1 Entry(入口)2.2 Output(输出)2.3 Loader(加载器)2.4 Plugin(插件) 3. 按部就班实现webpack3.1 初始化项目3.2 完成项目骨架搭建3.3 实现webpack构建 一文… 文章目录 一文大白话讲清楚webpack基本使用——1——完成webpack的初步构建1. 先回忆webpack是个啥2. webpack四大核心2.1 Entry(入口)2.2 Output(输出)2.3 Loader(加载器)2.4 Plugin(插件) 3. 按部就班实现webpack3.1 初始化项目3.2 完成项目骨架搭建3.3 实现webpack构建 一文大白话讲清楚webpack基本使用——1——完成webpack的初步构建
1. 先回忆webpack是个啥
直接看这篇文章一文大白话讲清楚啥是个webpack
2. webpack四大核心
2.1 Entry(入口)
我们知道webpack需要根据一个或者多个入口文件来分析和构建模块依赖关系树然后通过入口配置找出所有的依赖模块进行打包我们可以配置一个入口也可以配置多个入口
2.2 Output(输出)
Webpack根据依赖关系将模块打包好形成一个或者多个打包文件。我们就是通过Output来配置输出的文件路径、文件名称和格式等
2.3 Loader(加载器)
我们上面的文章 讲过Webpack本身只能处理js模块如果要处理其他类型的文件模块比如VUE文件IMAGE文件等就需要Loader加载器通过配置不同的Loader我们几乎可以将任何类型的文件当成模块进行打包Loader的主要作用就是在模块加载时对其进行转换和处理。
2.4 Plugin(插件)
插件应该很好理解Webpack可以通过Plugin配置不同的插件来扩展自身的功能我们一般在webpack中引入并实例化plugin然后加入pluginA数组中
3. 按部就班实现webpack
3.1 初始化项目 我们新建一个webpackTest文件夹在此之前需要配置Node环境和npm等这个这里不详细讲默认node环境已OK然后用vscode或者webstorm打开也可以用其他开发工具只要便于使用终端命令就行 我们这里使用vscode来做演示 我们先来初始化项目输入npm init 初始完毕后安装输入npm install webpack webpack-cli来webpack和webpack-cli 初始化完毕后我们看一下目前的项目结构分为三部分node_modules模块目录、package.json和package-lock.json三个文件 现在项目初始化完成了开始我们的业务编码
3.2 完成项目骨架搭建 我们在根目录下新建一个src目录用来存放我们的源代码并在src目录下创建一个main.js作为Entry的入口文件。 然后在根目录下创建一个public用来存放我们的index.html文件 然后我们在src目录下再创建一个modulejs文件夹用来存放我们的js模块并在modulejs下面创建add.js 我们先来写index.html
!DOCTYPE html
html langen
headmeta charsetutf8titlewebpackTest/title
/head
bodydiv idapp/div
/body
/html然后写add.js
let add (x,y)xy;
export {add}然后写main.js里面引入add.js两个形成依赖关系
import {add} from ./modulejs/add
console.log(add(2,3))写好index.html,main.jsadd.js之后我们开始配置webpack四大核心EntryOutput,loader和Plugin由于我们目前只处理js文件所以webpack自身就可以处理暂且不配置loader和plugin在根目录下新建webpack.config.js
const pathrequire(path)
module.exports{mode:development,//开发模式entry:{//配置入口文件根据入口文件建立依赖关系main:./src/main.js},output:{//配置出口文件制定打包后的文件名称和路径path:path.resolve(__dirname,dist),//__dirname是node模块级别的全局对象返回当前文件所在的路径不包含文件名filename:js/chunk-[contenthash].js//[contenthash]表示由内容生成的唯一的hash},
}这时候我们已经完成项目的基本大家需要通过webpack跑起来为了方便我们在package.json中配置webpack构建命令build:webpack
3.3 实现webpack构建
然后我们在终端输入
npm run build运行完以后我们会发现项目根目录下多了一个dist文件夹里面生成了一个js文件这个就是最终打包好的js js生成了但问题是没有index.html我们没法去运行所以我们要把index.html打包并和打包后的js形成引用关系 这时候Plugin就该上场了 先安装html插件
npm install html-webpack-plugin我们在package.json里面引入HTML插件并制定index.html为模板
/**/
const HtmlPluginrequire(html-webpack-plugin)
/**/
plugins:[//因为可以有很多plugin所以是plugins数组new HtmlPlugin({template:./public/index.html,//指定main.js被关联的模板文件filename:index.html,//打包以后得名称inject:body//inject决定main.js被注入到index.html的什么位置这里选择的事body中body和true都表示注入到body标签的底部})
]下图template误写成tepalte了请复制上面的代码就行 然后我们重新在终端输入
npm run build打包后我们重新打开dist文件夹会发先里面活了一个index.html.而且打包后的js文件被注入到了html文件body标签的底部 这时候我们运行dist下面的index.html然后打开控制台看看main.js里面的console是否执行了打印 到这里我们初步完成了webpack的整体构建
