14、webpack的基本使用

简介: 14、webpack的基本使用

1、webpack


Webpack 就是一个前端资源加载/打包工具。


它的作用是将多种静态资源 js、css、less 转换打包成一个或多个 bundle,减少页面请求,优化性能。比如把多个JS打包成一个JS文件,把多个CSS文件打包到一个CSS文件,这样的话就不用一个个来导入。


Webpack 有5个关键核心点:


1、entry:它是导入模块和库的入口起点

2、output:告诉 webpack 在哪里输出它所创建的 bundles

3、loader:处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)打包起来,比如说CSS和图片等,需要转换才能打包

4、plugins:用来处理各种各样的任务,比如自动生成html文件,清除dist目录的插件等等。

5、modle:打包模式,development是没有压缩的,production是压缩的


2、webpack的基本打包配置


  • 1、初始化:yarn init -y
  • 2、安装依赖包:yarn add webpack webpack-cli -D
  • 3、到package.json文件中配置scripts:


  "scripts": {
    "build":"webpack --config webpack.config.js"
  }

4、配置webpack.config.js文件:

const path = require('path');
module.exports = {
  // 1、entry入口
  entry: './src/index.js',
  //   2、output出口
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // 3、mode模式,development是没有压缩的,production是压缩的
  mode: 'development',
};


5、打包:yarm build

如果是vue打包的话,可以利用vue-cli脚手架自动生成webpack配置,然后npm run build打包即可


3、导入(require)多个js文件打包成一个bundle.js

// 导入case1
require('../public/js/case1.js')
// 导入jquery
const $ = require('jquery')
$(function () {
  $('#app li:nth-child(odd)').css('color', 'red')
  $('#app li:nth-child(even)').css('color', 'black')
});

4、自动生成html文件(html-webpack-plugin)


1、安装:yarn add html-webpack-plugin -D

2、引入自动生成html的插件:const HtmlWebpackPlugin = require('html-webpack-plugin');

3、配置:plugins: [new HtmlWebpackPlugin({template: './src/index.html'})]

作用:不需要手动引入bundle.js,插件帮你完成


5、加载css文件(css-loader)


  • 1、安装loader转换器:yarn add style-loader css-loader -D
  • 2、配置加载规则:


// 6、调用CSS文件,因为webpack只认识JSON和JS,所以需要配置loader
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }

6、分离css文件(mini-css-extract-plugin)


1、安装:yarn add mini-css-extract-plugin -D

2、引入:const MiniCssExtractPlugin = require('mini-css-extract-plugin');

3、配置:loader: MiniCssExtractPlugin.loader

4、调用:new MiniCssExtractPlugin({ filename: 'css/index.css' })


7、加载less文件(less-loader)


  • 1、安装:yarn add less less-loader -D
  • 2、配置:
{
  test: /\.less$/,
  use: [
  {
    loader: MiniCssExtractPlugin.loader,
    options: { publicPath: '../' }
  }, 'css-loader', 'less-loader']
}


8、加载图片文件(url-loader)


  • 1、安装:yarn add url-loader file-loader -D
  • 2、配置:
 {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }


9、清除dist目录的插件(clean-webpack-plugin)


1、安装:yarn add clean-webpack-plugin -D

2、导入:const { CleanWebpackPlugin } = require('clean-webpack-plugin');

3、调用:

 plugins: [
    // 自动生成html文件
    new HtmlWebpackPlugin({ template: './src/index.html' }),
    // 分离css文件
    new MiniCssExtractPlugin({ filename: 'css/index.css' }),
    // 清除dist文件
    new CleanWebpackPlugin()
  ],


相关文章
|
前端开发 JavaScript 搜索推荐
webpack----前端工程化与webpack的基本使用
webpack----前端工程化与webpack的基本使用
|
11月前
|
JSON 前端开发 JavaScript
Webpack的基本使用
Webpack的基本使用
|
前端开发
前端学习笔记202303学习笔记第二天-webpack基本使用
前端学习笔记202303学习笔记第二天-webpack基本使用
60 0
前端学习笔记202303学习笔记第二天-webpack基本使用
|
前端开发 JavaScript
Webpack的基本使用,将html和css文件打包
Webpack的基本使用,将html和css文件打包
|
存储 前端开发 JavaScript
【Vue】webpack的基本使用
【Vue】webpack的基本使用
114 0
【Vue】webpack的基本使用
|
前端开发
webpack打包文件的基本使用
webpack打包文件的基本使用
104 0
|
缓存 资源调度 JavaScript
万字长文解密webpack-基本使用/高级用法/性能优化 你想要的全都有!!!
万字长文解密webpack-基本使用/高级用法/性能优化 你想要的全都有!!!
|
2月前
|
JavaScript
webpack打包TS
webpack打包TS
132 60
|
1月前
|
缓存 前端开发 JavaScript
Webpack 打包的基本原理
【10月更文挑战第5天】
|
1月前
|
前端开发 JavaScript
ES6模块化和webpack打包
【10月更文挑战第5天】