webpack的配置使用

Posted zerodoctor

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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‘});
})
  

  ```

  此时可以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‘
 }
}
 ```

 

    

以上是关于webpack的配置使用的主要内容,如果未能解决你的问题,请参考以下文章

Webpack 4 学习02(使用配置文件进行打包)

使用 airpack 让多个项目共享 webpack 配置

webpack配置使用PWA

深入浅出的webpack构建工具---webpack基本配置

webpack超详细配置, 使用教程(图文)

Webpack 错误:配置对象无效。 Webpack 已使用与 API 模式不匹配的配置对象进行初始化