webpack打包遇到的问题解决

webpack打包

软件 vscode
文件的存储位置，以及文件
在这里插入图片描述

index.html代码
后边我们用webpack打包生成功了bundle.js文件。

<!-- 注意：不推荐直接在这里引用任何包和任何css文件 ,改用导入main-->
<script src="./main.js"></script>

<ul>
    <li>这是第1个li</li>
    <li>这是第2个li</li>
    <li>这是第3个li</li>
    <li>这是第4个li</li>
    <li>这是第5个li</li>
    <li>这是第6个li</li>
    <li>这是第7个li</li>
    <li>这是第8个li</li>
    <li>这是第9个li</li>
    <li>这是第10个li</li>
</ul>

main.js代码
//这个main.js是我们项目的JS入口文件
//1.导入JQuery
import $ from ‘jquery’
//相当于 const $ = require(‘jquery’) import *** from 是ES6中导入模块的方法
//由于ES6的代码太高级，浏览器解析不了，所以会报错咋办啊：用webpack啊
$(function(){
$(‘li:odd’).css(‘backgroundColor’,‘lightblue’)
$(‘li:even’).css(‘backgroundColor’,function(){
return ‘#’ + ‘D97634’
})
})

首先你需要已经安装过node ，npm，和webpack
可用 webpack -v 测试安装的webpack版本

写好index.html 和main.js 我们试一试打包

第一次打包需要在控制台先执行 npm init -y

这时候项目中会出现一个package.json配置文件
在这个文件中找到“scripts”节点加入：
“dev”: “webpack --mode development”, // 开发环境

“build”: “webpack --mode production” // 生产环境
在这里插入图片描述

最后在手动添加一个webpack.config.js文件（简化打包命令只需要输入webpack命令即可）
webpack.config.js文件与src平级
代码内容如下：其实就是配置了打包的源文件和需要打包到正式文件的路径
代码：
const path=require(‘path’)
//通过Node模块操作，向外面暴露一个配置对象
module.exports={
entry:path.join(__dirname,’./src/main.js’),//打包文件
output:{
path:path.join(__dirname,’./dist’), //打包好的文件存放地址
filename:‘bundle.js’ //打包好的文件的文件名
},
mode:‘development’ //设置mode
}

注意：这里一定要加上：mode: ‘development’ // 设置mode
4.最后在终端输入 webpack 和命令
哒哒哒哒哒，成功啦。
在这里插入图片描述
最后我们可以发现dist中出现了新的bundle.js 文件

哦，对了，项目中我还在终端执行了这个命令
npm i jquery -s 安装jQuery
指令webpack ./src/mian.js ./dist/bundle.js 表示，运行webpack 处理main.js这个文件，并存储到 ./dist中，命名为/bundle.js的新文件中。

菜鸡在努力。啊，加油呀！

webpack打包遇到的问题解决

webpack打包

猜你喜欢