Webpack的基本使用

Webpack的基本使用方式(webpack-4.40.2)

Webpack可以做什么事情

  1. Webpack能够处理JS文件的相互依赖关系
  2. Webpack能够处理JS的兼容问题,把高级的浏览器不识别的语法,转为低级语法

(注意: 找不到entry需要在webpack.config.js中配置指定entry的index为main.js)

使用Webpack-dev-server,实现自动打包编译

  1. cnpm i webpack-dev-server -D(本地安装)

  2. 安装完毕后,使用方法和webpack命令完全一样

  3. 由于是在本地安装的webpack-dev-server,所以无法把他当做脚本命令在终端直接运行

  4. webpack-dev-server想要正常运行,需要在本地项目安装webpack,即使在全局安装过了

  5. 在package.json中配置"dev": “webpack-dev-server”

  6. npm run dev 启动自动编译

  7. 启动之后需要修改之前引入的bundle.js的路径,因为之前引入的bundle.js不是自动编译的

  8. webpack-dev-server帮我们生成的bundle.js并没有存放到硬盘上,而是存在了内存中,所以在项目的根目录下找不到,可以认为webpack-dev-server把打包好的文件以一种虚拟的形式托管到了项目的根目录中,虽然看不见,但是它是存在的,和dist, src, webpack.config.js 处在平级目录下

配置编译完成之后的操作

  • 自动打开浏览器 “dev” : “webpack-dev-server --open”
  • 设置端口 “dev”: “webpack-dev-server --open --port 8888”
  • 设置直接进入src目录 “dev”: “webpack-dev-server --open --port 8888 --contentBase src”
  • 设置热重载 “dev”: “webpack-dev-server --open --port 8888 --contentBase src --hot” (bundle.js热更新) --hot 可以实现页面异步刷新,但是对js没有效果

也可以用另外一种方式,把配置卸载webpack.config.js中,较繁琐不推荐

//在module.exports中添加配置
devServer: {
	open: true,//自动打开浏览器
	port: 8888,//设置端口
	contentBase: 'src',//指定图片管目录
	hot: 'true'//启用热更新第一步
},
plugins: [//配置插件的节点
  new webpack.HotModuleReplacementPlugin()//启用热更新第三步,new一个热更新的对象
]

const webpack = require('webpack')//启用热更新的第二步,在最上面添加

借助插件在内存中生成实时html页面

  1. 安装插件 cnpm i html-webpack-plugin -D

  2. 导入在内存中生成的html页面的插件

  3. const htmlWebpackPlugin = require('html-webpack-plugin')
    
  4. 在plugins中 new 一个插件,并且添加配置

       plugins:[
            new htmlWebpackPlugin({
                //创建一个在内存中生成html页面的插件
                template: path.join(__dirname,'./src/index.html'),
                filename: 'index.html'//指定生成的页面的名称
            })
        ]
    
  5. 内存中的html页面可以自动引入内存中的bundle.js,不需要再手动添加

引入CSS

1. 使用link标签引入会发起二次请求,不推荐

2. 在main.js中导入css文件,推荐

  1. 在main.js中导入需要配置加载器,webpack默认只能处理js文件,处理别的类型文件需要配置合适的加载器
  2. 安装 cnpm i style-loader css-loader -D
  3. 打开webpack.config.js, 新增配置节点module,用于配置所有的第三方模块的加载器

webpack处理第三方文件类型的过程

  1. 如果文件类型不是js,就去配置文件中查找第三方的loader规则
  2. 找到对应的匹配规则就会调用对应的loader去处理这种文件类型
  3. 在调用loader的时候是从后往前调用的
  4. 当最后一个loader调用完毕时,会把处理的结果交给webpack打包合并,最终输出到bundle.js中

Webpack中url-loader的使用(主要用于处理字体和图片)

  • 处理图片

    • 安装加载器: cnpm i url-loader file-loader -D

    • 添加匹配规则:

       { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631' } 
      

      limit可以指定图片大小,图片大于这个参数就不会被转为base64格式的字符串,图片名称变化是为了防止重名,小于则会转化

  • 处理字体

    • 导入css样式:

      import 'bootstrap/dist/css/bootstrap.css' 
      

      bootstrap4还需要导入:

      import 'open-iconic/font/css/open-iconic-bootstrap.css'
      

      安装: cnpm i bootstrap -D ; cnpm i https://github.com/iconic/open-iconic.git -D

    • 添加匹配规则:

       { test: /\.(ttf|eot|svg|woff|woff2|otf)$/, use: 'url-loader' }
      
    • 测试标签:

      <span class="oi oi-account-login"></span>
      <span class="oi oi-account-logout"></span>
      

总结Webpack基本使用步骤(webpack-4.40.2)

  1. 新建项目,npm init -y 初始化项目结构

  2. 创建基本项目结构,src目录下的index.html, main.js ,dist目录下的bundle.js

  3. 使用webpack main.js -o bundle.js 进行第一次打包,生成bundle.js文件,并在index.html中引入,可以渲染出对应效果

  4. 使用工具自动实时打包, 安装工具 cnpm i webpack-dev-server -D ,打包工具需要有配置信息,入口出口等(webpack-dev-server依赖于webpack和webpack-cli,必须在本地目录下安装)

  5. 添加配置文件webpack.config.js , 配置打包的文件入口和输出目录(入口需要指定 index: path)

  6. 进行第二次打包,直接使用命令 webpack , 此时还没有实现实时打包

  7. 在package.json中配置实时打包信息,在script属性下添加: “dev”: “webpack-dev-server --port 8888 --contentBase src --hot”

  8. 进行第三次打包, 使用命令 npm run dev , 实现实时打包

  9. 此时的bundle.js文件的路径会出现问题,使用插件在内存中生成bundle.js,不需要在添加script引入bundle.js

  10. 安装插件: cnpm i html-webpack-plugin -D

  11. 在webpack.config.js中添加配置信息,并且在导出对象上挂载插件

      var htmlWebpackPlugin = require('html-webpack-plugin')
      
      plugins: [
            new htmlWebpackPlugin({
                template: path.join(__dirname, './src/index.html'),
                filename: 'index.html'
            })
        ]
    
  12. 再次运行: npm run dev, 此时可以正常运行项目了

  13. webpack默认只能识别js文件, 引入css文件,需要先在本地安装加载器(配置其他的文件类型的加载器也类似): cnpm i style-loader css-loader -D

  14. 再配置节点以及匹配规则:

      module: {
            rules: [
                { test: /\.css$/, use: ['style-loader', 'css-loader'] }
            ]
        }
    
  15. Webpack中的babel配置:

  • 在webpack中默认只能处理一部分ES6语法,此时需要借助于第三方loader,把高级语法转换为低级语法再交给webpack打包通过Babel可以把高级语法转为低级语法

  • 安装: cnpm i babel-loader @babel/core @babel/preset-env -D //babel转换工具

    ​     cnpm i @babel/runtime @babel/plugin-transform-runtime -D //语法工具

    ​     cnpm i @babel/plugin-proposal-class-properties -D //语法工具

  • 添加匹配规则:

    {test:/\.js$/,exclude:/(node_modules|bower_components)/,use: {loader:"babel-loader"}}
    
  • 创建配置文件 .babelrc :

    {
      	"presets": [
          "@babel/preset-env"
        ],
    	"plugins":[ 
          "@babel/plugin-proposal-class-properties",
          "@babel/plugin-transform-runtime"
        ]
    }
    
  1. 注意:
  • JSON中不能写注释
  • ERROR: 不是内部或外部命令: 重新安装包文件资源, cnpm i
  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值