webpack配置及使用

webpack使用

什么是webpack

• wewbpack是前端的一个项目构建工具，它是基于Node.js开发的前端工具

安装webpack

• 安装Node.js
• 安装nrm：npm install nrm -g
• 切换源：nrm use taobao
  • 查看源：nrm ls
• 安装webpack：npm install webpack -g
• 安装webpack-cli：npm install webpack-cli -g
• 检查webpack -v

使用示例

• 新建文件夹

  • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HS6lG8yf-1580374810013)(E:\PerFile\notes\markdown\vue\photo\webpack示例文件目录结构.jpg)]

• 进入项目目录，使用命令npm init -y初始化npm

• 下载jquery：npm install jquery -S

• 修改index.html文件

  • <ul>
        <li>this is a li</li>
        <li>this is a li</li>
        <li>this is a li</li>
        <li>this is a li</li>
        <li>this is a li</li>
        <li>this is a li</li>
    </ul>
    

• 修改main.js文件

  • import $ from 'jquery'//导入jquery
    
    $(function () {//实现隔行变色
      $('li:odd').css('backgroundColor', 'blue')
      $('li:even').css('backgroundColor', 'red')
    })
    

• 打包编译

  • 在项目根目录新建文件webpack.config.js

  • const path = require('path')
    
    module.exports={
      entry:path.join(__dirname, './src/main.js'),//需要编译的文件
      output:{
        path: path.join(__dirname, './dist'),//编译后的输出目录
        filename:'bundle.js'//输出的文件名
      },
      mode: 'development'//编译模式
    }
    

  • 执行命令webpack

  • 在index.html中引入打包好的js文件

• 运行

  • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rfC3jsZi-1580374810015)(E:\PerFile\notes\markdown\vue\photo\webpack示例运行结果.jpg)]

使用webpack-dev-server自动打包

• 安装：npm i webpack-dev-server -D

• 本地安装webpack和webpack-cli

  • npm i webpack -D
  • npm i webpack-cli -D

• 编辑package.json

  • 添加scripts脚本

  • "devs": "webpack-dev-server"
    

• 运行：npm run devs

• 注：

  • webpack-dev-server打包生成的bundle.js文件在项目的根目录下，并且没有存在物理磁盘中，直接托管到电脑的内存中

webpack-dev-server常用参数

• 语法：webpack-dev-server 【参数】

• 常用参数

  • --open：自动打开浏览器
  • --port 【端口号】：配置端口号
  • --contentBase 【路径名】：配置托管的根路径
  • --hot：热加载，浏览器免刷新加载

• 在webpack.config.js中配置

  • const path = require('path')
    const webpack = require('webpack')//webpack>=4.x时可以省略
    
    module.exports={
      entry:path.join(__dirname, './src/main.js'),
      output:{
        ....
      },
      mode: 'development',
      devServer:{
        open: true,//自动打开浏览器
        port: 8081,//配置端口
        contentBase: 'src',//配置托管根路径
        hot: true//热加载
      },
      plugins: [//热加载需要导入此对象，webpack>=4.x时可以省略
        new webpack.HotModuleReplacementPlugin()
      ]
    }
    

使用html-webpack-plugin将html文件托管到内存中

• 安装：npm i html-webpack-plugin -D

• 修改webpack.config.js

  • const path = require('path')
    const htmlWebpackPlugin = require('html-webpack-plugin')//引入html-webpack-plugin
    
    module.exports={
      entry:path.join(__dirname, './src/main.js'),
      output:{
        path: path.join(__dirname, './dist'),
        filename:'bundle.js'
      },
      mode: 'development',
      devServer:{
        open: true,
        port: 8081,
        contentBase: 'src',
        hot: true
      },
      plugins: [//配置需要托管的文件和托管后的文件名
        new htmlWebpackPlugin({
          template: path.join(__dirname, './src/index.html'),
          filename:'index.html'
        })
      ]
    }
    

• 注：

  • 使用html-webpack-plugin后会自动将打包好的js文件引入到html中，无需在html中手动引入

引入css文件

• 安装样式加载器：npm i style-loader css-loader -D

• 修改webpack.config.js

  • const path = require('path')
    const htmlWebpackPlugin = require('html-webpack-plugin')
    
    module.exports={
      entry:path.join(__dirname, './src/main.js'),
      output:{
        path: path.join(__dirname, './dist'),
        filename:'bundle.js'
      },
      mode: 'development',
      devServer:{
        open: true,
        port: 8081,
        contentBase: 'src',
        hot: true
      },
      plugins: [
        new htmlWebpackPlugin({
          template: path.join(__dirname, './src/index.html'),
          filename:'index.html'
        })
      ],
      module: {//用于配置所有第三方模块，加载器
        rules: [//配置规则
          {test: /\.css$/, use: ['style-loader', 'css-loader']}//配置css文件规则
        ]
      }
    }
    

• 在main.js中引入：import './css/index.css'

• less文件加载器：less-loader

• scss文件加载器：sass-loader

  • 需要安装node-sass
    • npm i node-sass -D
    • 如果npm无法安装
      • npm i cnpm -g
      • cnpm i node-sass -D

使用url-loader加载文件

• 安装：npm i url-loader file-loader -D

• 修改webpack.config.js文件

  • {test: /\.(jpg|jpeg|png|gif)$/, use: 'url-loader'}

• 给url-loader添加参数

  • use: 'url-loader?【参数名】=【参数】'

• 常用参数（参数之间使用&符号连接）

  • limit：值为图片大小，单位为byte，当图片文件小于或等于设定的大小时，图片会进行Base64编码
  • name：
    • [hash:【位数，最大32】]
    • [name]：表示原文件名
    • [ext]：表示原文件后缀
    • 示例：name=[hash:8]-[name].[ext]

• 使用字体图标文件

  • 安装bootstrap：npm i bootstrap -D

    • 若bootstrap为4.x版本，需要下载open-iconic
    • npm i open-iconic -D

  • 添加html标签：<span class="oi oi-account-login" aria-hidden="true"></span>

  • 在main.js中导入css文件

    • import 'bootstrap/dist/css/bootstrap.min.css'
      import 'open-iconic/font/css/open-iconic-bootstrap.min.css'
      

    • 在引入node_modules中的文件时可以直接添加包路径

  • 在webpack.config.js中添加loader

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