在多个文件中import同一个文件，webpack会多次打包吗

Posted 2023-03-18

简单,用鼠标把你要打包的文件都选上,随便在其中一个文件上面点右键,添加到压缩文件就OK了怕你不会,再教你怎么选那些文件:按住键盘Ctrl键不要放开(在键左下角),用鼠标一个一个把你要打包的文件都点上,它们都变成蓝色了那就是都选上了 参考技术A 1.模拟react/vue环境
第一步是安装相关webpack、babel等相关依赖以及建好目录webpack设置：
//webpack.config.js
module.exports =
entry: './app.js',
output:
filename: 'bundle.js'
,
module:
loaders:[

test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react'
,
]



package.json所需依赖：
//package.json

"name": "test",
"version": "0.0.1",
"devDependencies":
"webpack": "^1.14.0"
,
"dependencies":
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0"



其他用于测试的文件：

//demo.js--相当于vue
export default
test(argu)
console.log(argu)



//test1.js --相当于某个组件

import demo from './demo'

export default
test1()
demo.test(1)



//test2.js --相当于另一个组件
import demo from './demo'

export default
test1()
demo.test(2)



//add.js --入口文件本回答被提问者采纳

webpack

暴露js文件两种方式，export{ 和和export default{,

两者区别是

export可以在一个js文件中写多个，export default在一个js文件中只能写一个

导入方式  export=> import {a  } from " "     export default =>import a from ""

 

webpack打包所有项目中的所有静态资源文件jscss等

1.使用webpack使得浏览器支持import export

安装webpack和webpackcli=>

　　　　　调用webpack 执行npx webpack命令（如果文件中没有webpackconfigjs，这个命令就通过依赖webpack文件进行打包，放屁这执行文件中的webpackconfigjs）=>

　　　　　　　　　　生成dist目录和main.js文件=>

webpack对ES6中的import和export语句进行降级使得旧版本浏览器可以执行的ES5的代码

2.webpack处理图片，webpack默认只能处理js文件

须要安装npm insrall --save-div file-loader来进行处理

3.对webpack进行配置webpack.config.js

webpack有四个核心属性：1）entry项目入口文件

　　　　　　　　　　　　2）output项目输出文件{filename:"".打包之后的文件名称path:打包生成的那个目录

　　　　　　　　　　　　3）module，这里定制rules处理非js文件

　　　　　　　　　　　　　　　　　　webpack默认只能处理js文件，

　　　　　　　　　　　　　　　　　　其他如图片，视频，css，字体文件等非js文件不能处理，

　　　　　　　　　　　　　　　　　　配置方法就是当遇到png/jpg/svg等结尾的文件时，就use安装过的file-loader来进行处理

　　　　　　　　　　　　　　　　　　处理css文件=>安装cssloader并配置规则来出处理css文件，并把处理后的css文件生成一个字符串，把该字符串存放到dist目录下的js文件中，用styleloader把字符串生成到页面当中

　　　　　　　　　　　　　　　　　　处理.vue结尾文件，有vueloader

　　　　　　　　　　　　　　4 ) plugin,插件，帮助webpack实现其他的功能，如生成文件，清理文件夹等

　　　　　　　　　　　　　　　　　　设定HtmlWebpackPlugin，可以生成一个html页面模板，生成一个页面，并把dist生成的多个js文件进行自动引入

　　　　　　　　　　　　　　　　　　清理dist文件夹，清理不用的js文件

4.entry引入多个js文件