网站建站需求,潍坊企业建站系统,学院网站建设 好处,做58同城这样的网站前言
上一篇文章已经说明了webpack的定义以及需求
本偏文章主要讲解webpack的基本使用 tips#xff1a;现在以vscode编辑器来展示#xff0c;只需要几个步骤就可以实现webpack的基本使用。
一、首先要安装node.js
1、不会安装node.js的#xff0c;可以在网上自己找教程来…
前言
上一篇文章已经说明了webpack的定义以及需求
本偏文章主要讲解webpack的基本使用 tips现在以vscode编辑器来展示只需要几个步骤就可以实现webpack的基本使用。
一、首先要安装node.js
1、不会安装node.js的可以在网上自己找教程来安装这里就不作一一讲解啦
2、查看一下node.js是否已经安装在终端中输入命令node即可显示版本号 二、创建package.json
在根目录文件下创建package.json文件在终端中输入命令npm init -y即可在项目中自动生成 三、webpack和webpack-cli的安装
在终端中输入命令npm install webpack webpack-cli --save-dev即可在项目中自动下载安装。
tips下面图片之前已经安装过展示 四、新建webpack.config.js
手动在根目录下新建webpack.config.js文件找到需要打包的文件以及打包之后输出的路径以及文件的名称。 下面是代码
// CommonJS语法
const path require(path)
module.exports {mode: development,entry: path.join(__dirname, /webroot/js, ceshi.js),//需要打包的路径output: {path: path.join(__dirname, /webroot/dist), //打包后输出路径filename: bundle_main.js//打包后输出路径文件名称}
}
五、package.json文件中修改scripts构建类型
在package.json文件修改构建类型为
scripts: { build:webpack }, 六、完成打包
在终端中输入打包命令即可在打包完成可以在打包后输出路径查看自己打包文件后面直接引用打包后路径的文件即可。 引入文件 运行项目会看到 简单六步骤即可使用webpack基本使用。
1、残留问题那么每次修改文件都需要打包一次吗是的。可以做热更新自动打包只需要保存文件就会自动执行一次打包操作。下篇文章会讲解到。
2、多文件打包
3、怎么样子es6语法、css和图片等 总结
本章主要讲解webpack的基本使用方法简单易上手只需要六个步骤就可以基本使用webpack来打包文件。
