文章目录
? webpack的概念
? webpack的基本使用
项目目录并初始化
创建项目，并打开项目所在目录的终端，输入命令：
npm init -y
创建首页及js文件
以jQuery为例安装jQuery
打开项目目录终端，输入命令:
npm install jQuery -S
导入jQuery
打开index.js文件，编写代码导入jQuery并实现功能：
import $ from "jquery"; $(function(){
$("li:odd").css("background","cyan"); $("li:odd").css("background","pink"); }) 安装webpack
- 打开项目目录终端，输入命令:
npm install webpack webpack-cli -D - 然后在项目根目录中，创建一个 webpack.config.js 的配置文件用来配置webpack
在 webpack.config.js 文件中编写代码进行webpack配置，如下：
module.exports = {
mode:“development”//可以设置为development(开发模式)，production(发布模式)
}
补充：mode设置的是项目的编译模式。
如果设置为development则表示项目处于开发阶段，不会进行压缩和混淆，打包速度会快一些
如果设置为production则表示项目处于上线发布阶段，会进行压缩和混淆，打包速度会慢一些 - 修改项目中的package.json文件添加运行脚本dev，如下：
“scripts”:{
“dev”:“webpack”
}
注意：scripts节点下的脚本，可以通过 npm run 运行，如：
运行终端命令：npm run dev
将会启动webpack进行项目打包 - 运行dev命令进行项目打包，并在页面中引入项目打包生成的js文件
打开项目目录终端，输入命令:
npm run dev
等待webpack打包完毕之后，找到默认的dist路径中生成的main.js文件，将其引入到html页面中。
浏览页面查看效果。
? webpack的相关设置
设置webpack的打包入口/出口
const path = require("path"); module.exports = { mode:"development", //设置入口文件路径 entry: path.join(__dirname,"./src/xx.js"), //设置出口文件 output:{ //设置路径 path:path.join(__dirname,"./dist"), //设置文件名 filename:"res.js" } } 设置webpack的自动打包
npm install webpack-dev-server -D
2.修改package.json中的dev指令如下：
"scripts":{
"dev":"webpack-dev-server" } 3.将引入的js文件路径更改为：
<script src="/bundle.js"></script> 注意：
webpack-dev-server自动打包的输出文件，默认放到了服务器的根目录中。
补充：
在自动打包完毕之后，默认打开服务器网页，实现方式就是打开package.json文件，修改dev命令：
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999" 配置html-webpack-plugin
使用html-webpack-plugin 可以生成一个预览页面。
因为当我们访问默认的 http://localhost:8080/的时候，看到的是一些文件和文件夹，想要查看我们的页面,还需要点击文件夹点击文件才能查看，那么我们希望默认就能看到一个页面，而不是看到文件夹或者目录。
npm install html-webpack-plugin -D
2.修改webpack.config.js文件，如下：
//导入包 const HtmlWebpackPlugin = require("html-webpack-plugin"); //创建对象 const htmlPlugin = new HtmlWebpackPlugin({
//设置生成预览页面的模板文件 template:"./src/index.html", //设置生成的预览页面名称 filename:"index.html" }) 3.继续修改webpack.config.js文件，添加plugins信息：
module.exports = {
...... plugins:[ htmlPlugin ] } webpack中的加载器
注意：指定多个loader时的顺序是固定的，而调用loader的顺序是从后向前进行调用
? 使用webpack打包发布项目
"scripts":{
"dev":"webpack-dev-server", "build":"webpack -p" } 2.在项目打包之前，可以将dist目录删除，生成全新的dist目录
? 在webpack中使用vue
Vue单文件组件
在webpack中使用vue
npm install vue -S
2.在index.js中引入vue：
import Vue from “vue”
3.创建Vue实例对象并指定el，最后使用render函数渲染单文件组件
const vm = new Vue({
el:"#one", render:h=>h(app) }) ?写在最后
✨ 原 创 不 易 ， 希 望 大 家 多 多 支 持 ！ ！ ！ \textcolor{blue}{原创不易，希望大家多多支持！！！} 原创不易，希望大家多多支持！！！
? 点 赞 ， 你 的 认 可 是 我 创 作 的 动 力 ！ \textcolor{green}{点赞，你的认可是我创作的动力！} 点赞，你的认可是我创作的动力！
⭐️ 收 藏 ， 你 的 青 睐 是 我 努 力 的 方 向 ！ \textcolor{green}{收藏，你的青睐是我努力的方向！} 收藏，你的青睐是我努力的方向！
✏️ 评 论 ， 你 的 意 见 是 我 进 步 的 财 富 ！ \textcolor{green}{评论，你的意见是我进步的财富！} 评论，你的意见是我进步的财富！
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/209637.html原文链接：https://javaforall.net
