1安装webPack的方式 01==》 第一次全局安装 npm i webpack -g 第一次安装了之后以后就不需要在安装了
查看webpack的版本,webpack -V 我的版本是3.8.1
如果出现对应的版本, 你就不需要再次执行 npm i webpack -g
说明你已经安装过webpack了;
02==》 创建一个文件夹;如testwebpack 在项目根录下(testwebpack)运行 npm i webpack --save-dev 安装到项目依赖中去
会出现两个文件夹;node_modules package.json这个两个文件夹
如果没有 package.json ;你就执行 npm init -y
2尝试使用webpack 安装包描述文件 npm init -y 新版本的node会自带这个的;
npm i jquery -S 安装jq 保存到依赖列表中去了;
此时你就可以在package.json 看见自己已经安装了jquery了
testwebpack目录下==》新建src目录 在src目录下 新建index.html文件 在src目录下新建main.js文件
src目录下创建 imgs文件夹 和js文件夹(文件结构不要错了) 在main.js文件中导入jq 导入的语法是 import ** from **它是es6中导入模块的方式 1 如 import $ from 'jquery' 注意大小写 从引入文件可以知道 首先是在自己的兄弟目录中去找
然后去父级目录的兄弟目录中去找 然后依次类推(重点)
import $ from "jquery";
$(function(){ console.log("haha") }) 在node.js中 你要是这样写的 const $=require("Jquery") 由于es6的import导包的方式台高级了 所以浏览器解析不了 所以import $ from 'Jquery'汇报错 所以需要webpack来惊醒转化
运行webpack。
webpack ./src/mian.js ./dist/testindex.js 在dist中被编译的文件是为testindex.js
此时你就会发现,项目目录下多了一个dist文件夹;和文件夹下有个文件;
注意:如果如果你配置了webpack.config.js,再次运行上面的命令;会报错
配置webpack和命令运行;
3在项目的跟目录下创建webpack.config.js文件配置如下;
const path = require("path");
module.exports={ entry:path.join(__dirname,'./src/main.js'),//入口文件 使用webpack要打包哪一个文件 output:{ 输出相关的配置 path:path.join(__dirname,'./dist'),1)">指定打包好的文件会输出到哪一个目录(dist)下去 filename:"testindex.js" //指定打包好的文件的名称叫什么名字 } } 3所以在index中的时候我们就引入被webpack编译好的js文件就可以了 <script src="../dist/testindex.js"></script>
这里引入的时候需要注意的点是:
之所以是testindex.js是因为配置写的编译成testindex.js
如果你已经向上面这样配置了 可以直接在项目的根目录下webpack就可以运行了
因为已经配置好了
webpack 能够处理的问题
ebpack能够处理js文件之间的互相依赖关系
webpack能够处理js的兼容性问题 能装将es6的语法转化为es5的语法
我们可以发现引入jquery的两种方式
const $=require("Jquery")
import $ from 'jquery'
原文地址:https://www.cnblogs.com/IwishIcould
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。