webpack前端应用之基础打包

阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6

目录

前言初识 Webpack 5

一、前端工程化

1、webpack

​ 2主要功能

2、webpack的使用配置文件所需要的信息五大配置属性

3、示例

        强调

4、webpack中使用的loader

二、webpack配置详解


前言初识 Webpack 5

        webpack 是一个静态资源的打包工具会以一个或多个文件为入口将这一个或多个文件直接或间接使用到的所有文件组合成一个或多个文件输出。输出的文件就是编译好的文件通常称其为 bundle可以在浏览器上运行。Webpack 本身能力有限在不添加 loader、plugin等扩展时能力有限。

        Webpack 能让前端具有 模块化 和 工程化。

一、前端工程化

1、webpack

1定义是一个前端的构建工具。前端代码格式多html、css、js、图片前端构建工具的作用是将各种格式不同文件打包到一起方便项目的上线运行。将开发环境的代码转换成运行环境的代码

开发环境的代码便于阅读

运行环境的代码能够更快的执行通常会对代码进行压缩

​ 2主要功能

​ A、代码压缩将js代码、css代码、静态的资源文件(图标、图像)等进行混合压缩使代码的体积变小、加载速度更快

B、统一编译语法css、less、sassES6语法、TypeScript语法等语法要求不同在不同浏览器上运行时会出现问题就需 要使用构建工具进行统一编译

C、模块化处理css、js都有自己的模块化处理方式对于这些模块化的语法在不同浏览器上的兼容性很差需要使用构建工具统一模块化的形式提高兼容性

2、webpack的使用配置文件所需要的信息五大配置属性

1entry入口配置配置打包的入口文件即从项目的哪个文件开始打包

2output输出配置配置打包后的文件名称是什么、存储路径是什么

         path指明存储路径

         filename指定打包后的文件名

         clean指定打包前是否清空打包的输出目录

3Loaders加载器webpack只能处理js、json等文件若需要打包处理其他格式的文件css、less、sass、vue、图片时需要使用不同的loader插件辅助完成。若安装了不同的loader需要在webpack的配置中通过module.rules进行配置

4plugins 插件扩展webpack的功能。如html插件

5mode打包的模式 webpack 有两种打包模式生产模式 production 和 开发模式 development。两种模式都只能编译ES6中的模块Module语法。

3、示例

1创建文件夹根目录 webpack-study

2进入该文件夹打开cmd窗口vs code终端

​3将该文件夹初始化为npm项目npm init

4安装 webpack 开发依赖npm install webpack webpack-cli -D

        或 npm install  webpack  -D

            npm install  webpack-cli  -D

        强调

​         A、使用npm安装包时若没有指定版本号默认安装最新版本

         B、package.json文件中dependencies键的含义是发布后还依赖的devDependencies键的

                含义是开发时的依赖

​         C、npm install —save将依赖包安装到dependencies键下npm install —save-dev将依赖

                包安装到devDependencies键下

         D、i 是 install 的缩写-D 是 —save-dev 的缩写(即在开发时的依赖)

​ 5项目的目录结构

 6写代码

​ 7在项目的根目录下创建webpack的配置文件webpack.config.js

/**
 * webpack的基本打包配置有: entry、output、mode 三项即可
 */
const path = require('path');
module.exports = {
    entry:'./src/main.js',//配置打包入口文件
    output:{//输出配置
        path: path.join(__dirname,'dist'),//配置输出文件的保存位置
        filename:'js/bundle.js',//打包后的文件名
        clean: true,//打包前是否将打包的输出目录清空
    },
    mode:'development'//以开发模式打包
}

8在package.json文件中配置打包指令

  1. "scripts": {
  2. "build": "webpack"
  3. }

​ 9运行打包指令进行打包

​ 10将打包后的js文件导入页面文件index.html中

4、webpack中使用的loader

​ 1url-loader用来打包图像文件

2’style-loader’, ‘css-loader’, ‘less-loader’用来打包样式文件

3babel-loader打包js文件

4vue-loader打包.vue文件

 此处附加 webpack官网

二、webpack配置详解

const { resolve } = require('path'); // node 内置核心模块用来处理路径问题。
module.exports = { 
     mode: 'development' //开发环境   production  //生产环境
 	 entry: './src/js/index.js', //  单入口文件
      // entry: {                     //多入口  会打包双方重复文件
      //   index: './src/index.js',
      //   another: './src/another-module.js'
      // },
      // entry: {                     //多入口   lodash不会重复打包
      //   index: { import: './src/index.js', dependOn: 'shared' },
      //   another: { import: './src/another-module.js', dependOn: 'shared' },
      //   shared: 'lodash' //不会重复打包
      // },
	 output: { // 输出配置
    	 //filename: './built.js', // 输出文件名 
         path: resolve(__dirname, 'dist'),  //打包后的输出位置 webpack当前目录下的  dist
    //contenthash根据内容变化生成文件名 不变不修改名字会用缓存
        filename: 'scripts/[name].[contenthash].js', //'bundle.js',      //打包后的文件名  多个入口不能写固定一个名字
        clean: true,   //打包后清除上次内容
        assetModuleFilename: 'images/[contenthash][ext]', //静态文件打包地址/文件名
        publicPath: ''
	 },
    // devtool: 'inline-source-map',  //打包后找到真实源代码位置
     devServer: {            //实时更新
        static: './dist' 
        hot: true,   //开启热更新
        compress: true, // 启动gzip压缩
        port: 3000, // 端口号
        open: true // 自动打开浏览器
        proxy: {   //代理
          '/api': {
            target: 'http://localhost:4000',
            changeOrigin: true,
            ws: true,
            pathRewrite: {
              '^/api': ''
            }
      }
    }
  },
 module: {
    rules: [
      // 详细loader配置
      // 不同文件必须配置不同loader处理
     {
        test: /\.(jpg|gif|png)/,
        use: 'url-loader',
        option: {// 图片大小小于8kb就会被base64处理// 优点: 减少请求数量减轻服务器压力// 缺点图片体积会更大文件请求速度更慢
          esModule: true,
          limint: 5 * 1024,    //图片是否转base64
          name: '[hash: 10].[ext]'  //图片命名
        }
      },
      {
        test: /\.(css|less)$/,
        // use: ['style-loader', 'css-loader', 'less-loader']  //从后往前编译 先解析在编译  行内样式
        use: ['MinCssExtractPlugin.loader', 'css-loader', 'less-loader'], //把css文件打包到一个css 用link引入到html中
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 不打包指定路径下的js文件
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: [
              [
                '@babel/plugin-transform-runtime'  //为promise解决
              ]
            ]
          }
        }
      }
 
    ]
  },
 plugins: [
webpack.HotModuleReplacementPlugin(), //热更新
    new HtmlWebpackPlugin({
      template: './index.html', //要打包的html
      filename: 'app.html',  //html打包后的名字
      inject: 'body',   //script 标签生成地址
      collapseWhitespace: true,  //压缩移除空格
      removeComments: true,  //压缩移除注释
    }),
    new MinCssExtractPlugin({   //把css文件打包到一个新css 用link引入到html中 可修改地址/文件名
      filename: 'styles/[contenthash].css'
    })
  ],
 optimization: {
    minimizer: [
      new CssMinimizerWebpackPlugin()  //还需将mode改为production  会压缩css代码
    ],
    splitChunks: {
      // chunks: 'all',// 公共文件 lodash不会重复打包
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chuns: 'all'
        }
      }
    }
  }
};
阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6