webpack的使用

Posted 2022-01-30 feixiangdecainiao

---恢复内容开始---

 

 

webpack主要处理新语法，但是浏览器不识别，用webpack前端工具，处理成浏览器认识的

添加webpack的依赖
npm init -y
npm install webpack

处理指定的文件，并且指定输出文件的目录和名字
webpack  .\src\main.js  .\dist\bubdle.js

使用的时候

<script src="./dist/bundle.js"></script>

实现webpack热部署,使用webpack-dev-server，注意本地项目中必须安装webpack

需要配置文件

指定配置文件的名字，webpack.config.js

安装到工程开发依赖,使用的时候和webpack的命令是一样的。直接使用webpack-dev-server

注意是在项目中本地安装，所以不能当做脚本命令直接在命令行置直接执行，只能全局安装才能

在package.json配置脚本命令，scripts中设置,这样就可以直接命令行通过npm run dev执行webpack-dev-server

"dev" : "webpack-dev-server"

注意使用的时候安装webpack-dev-server到工程的本地目录

cnpm i webpack-dev-server -D

这种直接是工程的根目录，如果自己想访问打包后的bundle.js，直接访问 根目录/bundle.js

热部署使用的时候使用的是根目录下的bundle.js,打包生成的bundle.js没有存在物理磁盘中，在内存中托管

使用的时候直接

<scripts src="/bundle.js"></scripts>

所以配置文件中不需要output了。

 

webpack-dev-server的配置参数

自动打开浏览器的设置，还有指定端口3000,上来打开指定的目录src，加上--hot，局部更新，减少不必要重载，浏览器自动刷新
"dev" : "webpack-dev-server --open --port 3000 --contentBase src --hot"

还有一种直接在webpack.config.js中直接使用webpackServer配置

 

安装在内存中生成页面的插件

安装webpack插件

cnpm i html-webpack-plugin -D

 

htmlWebpackPlugin的插件：实现HTML文件加载到内存，自己处理bundle.js文件

const path = require(‘path‘)

const htmlWebpackPlugin = require(‘html-webpack-plugin‘)

module.exports = 
  //  入口文件
  entry: path.join(__dirname, ‘./src/mian.js‘),

  plugins: 
      new htmlWebpackPlugin(//   
      template: path.join(__dirname,‘./src/index.html‘),
      filename: ‘index.html‘
    )
  

 

 

解决css会发生二次ajax请求

直接导入样式,在main.js中

import  ‘./css/index.css‘

需要这种方式，就需要安装style-loader 和css-loader

cnpm i style-loader css-loader -D

打开配置文件，新增配置节点新增配置节点modules，有个rules属性，是个数组，数组中存放所有第三方文件的匹配和处理规则

  module:  //这个节点用于配置所有的第三方模块加载器
    rules: [ //匹配规则
      
        test: /\.css$/,
        use: [‘style-loader‘, ‘css-loader‘]
      ,
    ]
  

多个loader的时候调用的规则是从右到左的形式，就是先调用后面的loader

 

处理less文件.使用的时候的方式import  ‘./css/index.less‘

安装插件

安装less

cnpm i less -D

安装加载器

cnpm i less-loader -D

  module:  //这个节点用于配置所有的第三方模块加载器
    rules: [ //匹配规则
      
        test: /\.css$/,
        use: [‘style-loader‘, ‘css-loader‘]
      ,
      //less配置的形式
      test: /\.less$/, use: [‘style-loader‘,‘css-loader‘,‘less-loader‘],
    ]
  

处理scss文件

import  ‘./sass/index.sass‘

cnpm i node-sass -D

cnpm i sass-loader -D

配置新的loader

  module:  //这个节点用于配置所有的第三方模块加载器
    rules: [ //匹配规则
      
        test: /\.css$/,
        use: [‘style-loader‘, ‘css-loader‘]
      ,
      //less配置的形式
      test: /\.less$/, use: [‘style-loader‘,‘css-loader‘,‘less-loader‘],
      test: /\.sass$/, use: [‘style-loader‘,‘css-loader‘,‘sass-loader‘],
    ]
  

webpack无法处理文件中的地址，无论是图片还是字体库，

需要第三方的loader

cnpm i file-loader

cnpm i url-loader

在配置文件中添加匹配规则

  module:  //这个节点用于配置所有的第三方模块加载器
    rules: [ //匹配规则
      
        test: /\.css$/,
        use: [‘style-loader‘, ‘css-loader‘]
      ,
      //less配置的形式
      test: /\.less$/, use: [‘style-loader‘,‘css-loader‘,‘less-loader‘],
      test: /\.sass$/, use: [‘style-loader‘,‘css-loader‘,‘sass-loader‘],
      test: /\.(jpg|png|bmp|jpeg)$/,use: ‘url-loader?limit=7632&name=[name].[ext]‘ 
    ]
  

绿色部分是指当图片大小小于指定大小就会转成base64编码的图片，否则就是专成真正的URL地址，地址也会变，主要是防止文件名字的重复，红色是指不修改名字和文件后缀，正常不设置

或者使用下面的形式，加上前缀hash值

test: /\.(jpg|png|bmp|jpeg)$/,use: ‘url-loader?limit=7632&name=[hash:8]-[name].[ext]‘ 

页面上引用字体图标

安装cnpm i bootstrap -D

在main.js中直接import  ‘bootstrap/dist/css/bootstrap.css‘

注意不写node_modules也行，前面不要加上/

使用url-loader处理样式文件

test: /\.(ttf|eot|woff|woff2)$/,use: ‘url-loader‘

注意package.json是json文件，不能在里面写注释

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---恢复内容结束---