webpack相关知识

技术文档网 2021-04-16
  1. 能够处理JS文件的互相依赖关系
  2. 能够处理JS的兼容问题
  • 安装

    1. 全局安装

      npm install webpack -g
      
    2. 项目安装

      npm install webpack --save-dev
      
  • 在项目中创建文件夹与入口文件

    • dist

    • src

      • css

      • images

      • js

      • index.html

      • main.js

  • 在项目中初始化

     npm init -y
    
  • 打包命令

    webpack ./src/main.js -o ./dist/bundle.js
    
  • 创建webpack.config.js配置文件手动,可直接运行webpack命令打包

    const path = require('path');
    module.exports = {
        mode: 'production',
        entry: path.join(__dirname, './src/main.js'),
        output: {
            path: path.join(__dirname, './dist'),
            filename: "bundle.js",
        }
    };
    
  • 安装热更新工具webpack-dev-server

    npm install webpack-dev-server -D
    或者
    yarn add webpack-dev-server -D
    
  • 在package.json文件中添加命令别名npm run dev

    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server"
      },
    
  • 运行命令npm run dev开启热更新工具

  • 通过http://localhost:8080/src/打开网页,并修改script引入文件

    打包生成的bundle.js文件,并没有存放至物理磁盘中,而是托管到了电脑的内存中,所以在根目录中也看不到bundle.js文件

        <script src="/bundle.js"></script>
    
  • 优化配置

    1. 在package.json中配置(推荐使用)

      "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
      
      1. --open 自动打开默认浏览器
      2. --port 3000 指定运行的服务器端口
      3. --contentBase src 跳转到src目录
      4. --hot 局部更新,配置后相当于打了一个补丁
    2. 或者在webpack.config.js中配置

      //还原package.json配置
      "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
      
      //在webpack.config.js中配置
      const webpack = require('webpack');//wp4以上不需要
      devServer: {
              //--open --port 3000 --contentBase src --hot
              open: true,
              port: 3000,
              contentBase: 'src',
              hot: true
          },
          plugins: [
              new webpack.HotModuleReplacementPlugin()//wp4以上不需要
          ]
      
  • 安装html-webpack-plugin插件(生成内存中的html文件)

    npm install html-webpack-plugin -D
    或者
    yarn add html-webpack-plugin -D
    
  • 配置html-webpack-plugin

    配置完成后可以去掉index的bundle.js引用文件

    //在webpack.config.js中
    const htmlWebpackPlugin = require('html-webpack-plugin');
    
    plugins: [
            new webpack.HotModuleReplacementPlugin(),
            new htmlWebpackPlugin({
                template: path.join(__dirname, './src/index.html'),
                filename: "index.html"
            })
        ]
    

打包CSS文件

  • 在main.js文件中import './css/index.css'

  • 安装loader

    npm install style-loader css-loader -D
    或者
    sudo yarn add style-loader css-loader -D
    
  • 在webpack.config.js文件中配置规则

    module: {
            rules: [
                {test: /\.css$/, use: ['style-loader', 'css-loader']}
            ]
        }
    

打包LESS文件

  • 在main.js文件中import './css/index.less'

  • 安装loader

    npm install less-loader -D
    sudo npm install less -D
    或者
    sudo yarn add less-loader -D
    sudo yarn add less -D
    
  • 在webpack.config.js文件中配置规则

    module: {
            rules: [
                {test: /\.css$/, use: ['style-loader', 'css-loader']},
                {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
            ]
        }
    

打包scss文件

import './css/index.scss'

sudo yarn add sass-loader -D
sudo yarn add node-sass -D//比较慢

module: {
        rules: [
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
            {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
            {test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']},
        ]
    }

打包图片

 npm install url-loader file-loader -D
 或者
 sudo yarn add url-loader file-loader -D


 module: {
        rules: [
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
            {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
            // {test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']},
            {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader'},
        ]
    }

注: 设置参数
limit参数是图片大小,单位是byte。小于此值则将图片转为base64
name参数可以对图片命令,不设置则名称为一个hash值
{test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=1374&name=[hash:8]-[name].[ext]'},


相关文章

  1. webpack相关知识

    能够处理JS文件的互相依赖关系 能够处理JS的兼容问题 安装 全局安装 npm install webpack -g 项目安装 npm install webpack --save-

  2. Javascript基础和ES6

    HTML的基础事件 onmouseover、onmouseout表示JS事件的鼠标移入鼠标移出 document.getElementById('id') JS中选择HTML的ID元素&lt;in

  3. JavaScript编码规则

    JavaScript编码规则 目的:改善协作编码、代码质量。 var 声明变量必须用var。 防止变量变为全局变量,污染全局环境。 常量 基本类型number、string、boolean是常量值。对

  4. JavaScript获取和设置CSS属性

    获取样式 元素对象的宽高位置距离等属性 如offsetWidht、cilentWidht、scrollWidth…… let oWidth=obj.offsetWidth; 注意: 只能获取属

  5. javascript作用域、上下文、this和闭包详解

    词法作用域lexical scope 定义在词法阶段的作用域。词法作用域是变量和语句块在定义时所处的位置决定的。 全局 块级:在{}之内是一个块级作用域(ES6之前没有块级作用于只有函数内的局部作用

随机推荐

  1. webpack相关知识

    能够处理JS文件的互相依赖关系 能够处理JS的兼容问题 安装 全局安装 npm install webpack -g 项目安装 npm install webpack --save-

  2. Javascript基础和ES6

    HTML的基础事件 onmouseover、onmouseout表示JS事件的鼠标移入鼠标移出 document.getElementById('id') JS中选择HTML的ID元素&lt;in

  3. JavaScript编码规则

    JavaScript编码规则 目的:改善协作编码、代码质量。 var 声明变量必须用var。 防止变量变为全局变量,污染全局环境。 常量 基本类型number、string、boolean是常量值。对

  4. JavaScript获取和设置CSS属性

    获取样式 元素对象的宽高位置距离等属性 如offsetWidht、cilentWidht、scrollWidth…… let oWidth=obj.offsetWidth; 注意: 只能获取属

  5. javascript作用域、上下文、this和闭包详解

    词法作用域lexical scope 定义在词法阶段的作用域。词法作用域是变量和语句块在定义时所处的位置决定的。 全局 块级:在{}之内是一个块级作用域(ES6之前没有块级作用于只有函数内的局部作用