webpack的配置使用
1. 引入webpack
网页中引入静态资源多了以后会出现什么问题？
网页加载速度慢，因为我们要发起很多的二次请求
要处理错综复杂的依赖关系
如何解决上述问题？
1.合并，压缩
2.使用webpack解决包之间的依赖关系
什么是webpack?
webpack是前端的项目构建工具，是基于node.js开发出来的
全局安装webpack
npm install webpack -g
npm install webpack-cli -g
npm install webpack --save-dev 向开发环境添加依赖（项目开发中使用这个安装）
2.webpack的基本使用
在html中引用main.js文件，在mian.js文件中又引用其他js文件，这时就存在了一些js文件的依赖问题以及语法问题
```
import $ from ‘jquery‘
$(function () {
$(‘li:odd‘).css(‘backgroundColor‘,‘blue‘);
$(‘li:even‘).css({‘backgroundColor‘:‘pink‘});
})
$(‘li:odd‘).css(‘backgroundColor‘,‘blue‘);
$(‘li:even‘).css({‘backgroundColor‘:‘pink‘});
})
```
此时可以i使用webpack来进行打包，生成一个新的文件，再由html引用这个新文件
命令： webpack ./src/js/main.js（原有的mian.js文件路径） -o ./dist/bundls.js（新生成的文件路径）
3.webpack基本配置文件的使用
在项目根目录下新建一个webpack.config.js文件，在文件中配置输入和输出文件，这样，下次在控制台直接使用webpack这个命令就可以打包出新文件了
webpack.config.js文件配置如下：
```
const path = require(‘path‘);
module.exports = {
entry: path.join(__dirname,‘./src/js/main.js‘),
output: {
path: path.join(__dirname,‘./dist‘),
filename: ‘bundls.js‘
}
}
entry: path.join(__dirname,‘./src/js/main.js‘),
output: {
path: path.join(__dirname,‘./dist‘),
filename: ‘bundls.js‘
}
}
```
相关推荐
不知道该写啥QAQ 2020-11-12
webfullStack 2020-11-09
Yvettre 2020-09-15
想做大牛的蜗牛 2020-10-30
gloria0 2020-10-26
gaojie0 2020-09-11
SelinaChan 2020-08-14
不知道该写啥QAQ 2020-08-09
gloria0 2020-08-09
不知道该写啥QAQ 2020-08-02
hline 2020-07-29
SelinaChan 2020-07-28
wangdianyong 2020-07-23
webpackvuees 2020-07-23
yqoxygen 2020-07-20
不知道该写啥QAQ 2020-07-18
waterv 2020-07-18
81463166 2020-07-17