webpack学习笔记(一)

webpack

一、开发环境快速入门

参考网址：

中文:https://webpack.docschina.org/

英文:https://webpack.js.org/

参考视频：https://www.bilibili.com/video/BV1e7411j7T5?p=17&spm_id_from=pageDriver

开发环境介绍

能让代码本地调试运行的环境,不需要注意优化，兼容等方面

初步使用：

参考网址：https://webpack.docschina.org/guides/getting-started/

基本安装

首先我们创建一个目录，初始化 npm，然后在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）：

npm init -y
npm install webpack webpack-cli -D

目录创建

src/index.js

import bar from './bar.js';

bar();

src/bar.js

export default function bar() {
  console.log("hello,webpack!")
}

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',							// 入口文件
  output: {											// 输出配置
    filename: 'bundle.js',							// 输出文件名
    path: path.resolve(__dirname, 'dist'),			// 输出文件路径配置
  },
    mode: 'development' 							//开发环境  // mode: 'production'  生产环境
    
};

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>起步</title>
   
  </head>
  <body>
    <script src="dist/bundle.js"></script>
  </body>
</html>

命令：npx webpack

当前webpack版本

"webpack": "^5.36.2",
"webpack-cli": "^4.6.0",

打包样式资源

安装包

npm i -D webpack webpack-cli style-loader css-loader less less-loader

#指定版本,命令输入在一行
npm i -D webpack@5.36.2 webpack-cli@4.7.0  style-loader@2.0.0  css-loader@5.2.4 less@4.1.1 less-loader@8.1.1

#逐个依次安装
npm i -D webpack@5.36.2 
npm i -D webpack-cli@4.7.0 
npm i -D style-loader@2.0.0 
npm i -D css-loader@5.2.4
npm i -D less@4.1.1
npm i -D less-loader@8.1.1

配置

webpack.config.js中添加module

//webpack.config.js中
const path = require('path');

module.exports = {
    entry: './src/index.js',							// 入口文件
    output: {											// 输出配置
        filename: 'bundle.js',							// 输出文件名
        path: path.resolve(__dirname, 'dist'),			// 输出文件路径配置
    },
    mode: 'development', 							//开发环境  // mode: 'production'  生产环境
    module: {
        rules: [
            // 不同文件必须配置不同loader处理
            {
                // 匹配哪些文件
                test: /\.css$/,
                // 使用哪些loader进行处理
                use: [
                    // use数组中loader执行顺序：从右到左，从下到上 依次执行
                    'style-loader', 'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader', 'css-loader', 'less-loader'
                ]
            }
        ]
    }
};

说明

功能：

把css打包到js中

打包命令：

npx webpack

npx主要用局部安装的命令执行

打包html资源

安装包

# 接打包样式资源的基础上继续安装
npm i -D html-webpack-plugin 
# 指定版本
npm i -D html-webpack-plugin@5.3.1

配置

//webpack.config.js
const path = require('path');
//导入包
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',							
    output: {											
        filename: 'bundle.js',							
        path: path.resolve(__dirname, 'dist'),			
    },
    mode: 'development', 							
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader', 'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader', 'css-loader', 'less-loader'
                ]
            }
        ]
    },
    plugins: [
    // 设置相应插件
    new HtmlWebpackPlugin({
      // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
      template: './src/index.html'
    })
  ]
};

说明

作用：

复制设置模板中的html（没有设置，则会创建一个空的HTML），并自动引入打包输出的所有资源（JS/CSS)，存放到output设置的目录下

打包命令：

npx webpack

打包图片资源

作用：本质上来讲，创建一个HTML，把图片资源打包到导出目录下，并自动配置好引用

安装包

npm i html-loader url-loader file-loader -D

#指定版本,命令输入在一行
npm i -D html-loader@2.1.2 file-loader@6.2.0 url-loader@4.1.1 

#逐个依次安装
npm i -D html-loader@2.1.2
npm i -D file-loader@6.2.0
npm i -D url-loader@4.1.1

配置

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        // 使用一个loader
        loader: 'url-loader',
        options: {
          // 图片大小小于limit，就会被base64处理
          limit: 8 * 1024,
          // 解析时会出问题：[object Module]
          esModule: false,
          // 给图片进行重命名
          name: '[hash:10].[ext]'
        }
      },
      {
        test: /\.html$/,
        // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
        loader: 'html-loader',
        options: {    
          // webpack5需要html-loader也配置 esModule:false
          esModule: false,
        }
          
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

打包字体图标和其他资源

安装包

#打包图片资源的时候已经安装

配置

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            // 打包其他资源(除了html/js/css资源以外的资源)
            {
                // 排除css/js/html资源
                exclude: /\.(css|js|html|less)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development'
};

devServer

安装包

npm i -D webpack-dev-server@3.11.2

配置

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'build.js',
    path: resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 打包其他资源(除了html/js/css资源以外的资源)
      {
        // 排除css/js/html资源
        exclude: /\.(css|js|html|less)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development',


  devServer: {
    // 项目构建后路径
    contentBase: resolve(__dirname, 'dist'),
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 3000,
    // 自动打开浏览器
    open: true
  }
};

说明

作用：

用来自动化（自动编译，自动打开浏览器，自动刷新浏览器...）

特点：

只会在内存中编译打包，不会有任何输出

启动devServer命令：

npx webpack serve

二、开发环境基本配置（综合配置）

初始化

最新版本安装（可能出现兼容性问题）

npm init -y
npm i webpack webpack-cli css-loader style-loader less-loader less html-webpack-plugin html-loader url-loader file-loader webpack-dev-server -D

指定版本安装

#指定版本,命令输入在一行
npm i -D webpack@5.36.2 webpack-cli@4.6.0 css-loader@5.2.4 style-loader@2.0.0 less-loader@8.1.1  less@4.1.1  html-webpack-plugin@5.3.1 html-loader@2.1.2 url-loader@4.1.1 file-loader@6.2.0 webpack-dev-server@3.11.2 

#逐个依次安装
npm i -D webpack@5.36.2 
npm i -D webpack-cli@4.7.0 
npm i -D style-loader@2.0.0 
npm i -D css-loader@5.2.4
npm i -D less@4.1.1
npm i -D less-loader@8.1.1
npm i -D html-webpack-plugin@5.3.1
npm i -D html-loader@2.1.2
npm i -D file-loader@6.2.0
npm i -D url-loader@4.1.1
npm i -D webpack-dev-server@3.11.2

当前版本(防止版本不同造成的错误)

"devDependencies": {
    "css-loader": "^5.2.4",
    "file-loader": "^6.2.0",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.1",
    "less": "^4.1.1",
    "less-loader": "^8.1.1",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.36.2",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"
  },

配置

 /*
  开发环境配置：能让代码运行
    运行项目指令：
      npx webpack           会将打包结果输出出去
      npx webpack serve     只会在内存中编译打包，没有输出
*/

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/bundle.js',
    path: resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      // loader的配置
      {
        // 处理less资源
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 处理css资源
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          // 关闭es6模块化
          esModule: false,
          outputPath: 'imgs'		//图片输出目录设置
        }
      },
      {
        // 处理html中img资源
        test: /\.html$/,
        loader: 'html-loader',
        options: {    
          // webpack5需要html-loader也配置 esModule:false
          esModule: false,
        }
      },
      {
        // 处理其他资源
        exclude: /\.(html|js|css|less|jpg|png|gif)/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'media'			//其他资源输出目录
        }
      }
    ]
  },
  plugins: [
    // plugins的配置
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'dist'),
    compress: true,
    port: 3000,
    open: true
  }
};

说明

入口路径: './src/js/index.js'
js输出路径: './dist/js/bundle.js'
输出目录: path: resolve(__dirname, 'dist')
index.html模板入口路径： './src/index.html'
index.html模板输出路径：'./dist/index.html'
处理图片资源配置中出现的outputPath: 'imgs'为设置图片输出目录，在'./dist/imgs/'目录里
处理其他资源配置中出现的outputPath: 'media'为设置其他资源输出目录，在'./dist/media/'目录里
样式都打包在'./dist/js/bundle.js'中，不需要另外设置目录
目录划分
- ./scr/js 存放js文件
- ./src/imgs 存放图片
- ./src/css 存放css
- ./src/media 存放其他资源，比如字体
执行命令：npx webpack serve

posted on 2021-05-09 07:49 问题在哪里阅读(90) 评论(0) 编辑收藏举报