webpack配置及简单案例
文件和文件夹解析:
dist文件夹:用于存放 之后打包的文件。
src文件夹:用于存放 源文件。
main.js:项目的入口文件。
mathUtils.js:定义了一些数学工具函数,可以在其他地方引用,并且使用。
index.html:浏览器打开展示的首页html
package.json:通过npm init
生成的,npm包管理的文件
js文件的打包
现在的js文件中使用了模块化的方式进行开发,不可以直接使用 的原因:
- 因为如果直接在index.html引入这两个js文件,浏览器并不识别其中的模块化代码。
- 另外,在真实项目中当有许多这样的js文件时,我们一个个引用非常麻烦,并且后期非常不方便对它们进行管理。
使用webpack工具,对多个js文件进行打包。命令如下: webpack src/main.js dist/bundle.js
使用打包后的文件
打包后会在dist文件下,生成一个bundle.js文件
- bundle.js文件,是webpack处理了项目直接文件依赖后生成的一个js文件,只需要将这个js文件在index.html中引入即可
入口和出口
每次使用webpack的命令都需要写上入口和出口作为参数,就非常麻烦,有没有一种方法可以将这两个参数写到配置中,创建一个webpack.config.js文件,如下:
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
}
这样就可以避免写webpack src/main.js dist/bundle.js
这么长了,而是直接写webpack
就OK了。
局部安装webpack
因为 一个项目往往依赖特定的webpack版本 ,全局的版本可能很这个项目的webpack版本不一致,导出打包出现问题。所以通常一个项目,都有自己局部的webpack。
第一步,项目中需要安装自己局部的webpack
npm install webpack@3.6.0 --save-dev
第二步,启动webpack打包
node_modules/.bin/webpack
package.json中定义启动
通过npm init
生成package.json
每次执行都敲这么一长串,因此可以在package.json的scripts中定义自己的执行脚本。
package.json中的scripts的脚本在执行时,会按照一定的顺序寻找命令对应的位置:
- 首先,会寻找本地的node_modules/.bin路径中对应的命令。
- 如果没有找到,会去全局的环境变量中寻找。
如何执行我们的build指令呢?
npm run build
webpack中使用CSS文件的配置
https://blog.csdn.net/qq_44824148/article/details/113105105
原文地址:https://blog.csdn.net/qq_44824148/article/details/113102459
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。