webpack打包相关配置

最新推荐文章于 2023-11-16 15:22:23 发布
最新推荐文章于 2023-11-16 15:22:23 发布
阅读量328 收藏
点赞数
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46977781/article/details/107272563
版权

这里写目录标题

js打包

  1. 安装node
  2. 安装webpack—指定版本
npm i webpack@3.6.0 -g
  1. 配置文件中的webpack.config.js
const path= require('path');
module.exports={
  entry:'./src/aaa.js',//入口
  output:{//出口
    path:path.resolve(__dirname,'dist'),//node 方法，可以拼接路径
    filename:'bundle.js'//导出名称
  }
}
  1. 初始化

备注：
下一级目录：cd 下一级目录
上一级目录：…/

npm init
  1. 填写名称（英文），然后会出现一个版本号 然后回车
    生成文件：
{
  "name": "meetwebpack",
  "version": "1.0.0",//版本号
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
     "build": "webpack"
  },
  "author": "",
  "license": "ISC"//开源协议不开源就删除
}
  1. 安装package.json依赖包
npm install
  1. 打包
 webpack或者npm run build

本地依赖包安装

npm install webpack@3.6.0 --save-dev

loader

可参考中文文档https://www.webpackjs.com/loaders/css-loader/

css打包

  1. 入口js文件设置require
require('./css/normal.css')
  1. 安装style-loader css-loader
npm install --save-dev css-loader
npm install style-loader --save-dev
  1. webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

less打包

  1. 安装
    直接用官网安装会因为版本过高报错
npm install less-loader@4.1.0 --save
  1. webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }
};

img打包

  1. url-loader
npm install --save-dev url-loader
  1. webpack.config.js
    limit:
  • 数值：文件大小*1024
  • 限制文件内的img图片大小 如果大小在限制内会直接加载，并使用base64方式直接加载图片。超过限制大小则需要安装file-loader
npm install --save-dev file-loader

同时需要配置下文件加载路径，在config文件内设置：

publicPath:'dist/'
  • 关于图片的命名规范问题：默认是生成一个32位的哈希值，当然可以进行自定义：
  • 在option内添加name属性即
  • name:‘img/[name].[hash:8].[ext]’
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
}

ES6转化为ES5打包

  1. loader
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
  1. config
 module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['ES2015']
        }
      }
    }
  ]
}

支持vue

  1. 应设置运行时依赖
npm install vue --save
  1. js文件引入vue模块
import Vue from 'vue';
  1. 配置config
resolve:{
    //别名
    alias:{
      "vue$":'vue/dist/vue.esm.js'
    }
  }

vue组件化开发配置

  1. 安装loader
npm install vue-loader vue-template-compiler --save-dev
  1. config文件
{
        text: /\.vue$/,
        use:['vue-loader']
      }

依旧会报错 此时应修改json 中的vue-loader 为"^13.0.0",然后重新安装 npm install

关于省略文件后缀名

config文件中配置

resolve:{
    //省略文件后缀名
    extensions:['.js','.css','.vue'],
    //别名
    alias:{
      "vue$":'vue/dist/vue.esm.js'
    }
  }

plugin

添加版权信息

修改config

const webpack =require('webpack')
module.exports={
 ...
  plugins:[
    new webpack.BannerPlugin('最终版权归aa所有')
  ]
}

打包html的插件

  1. 安装
npm install html-webpack-plugin --save-dev
  1. 修改config
const HtmlWebpackPlugin =require('html-webpack-plugin');

plugins:[
    new webpack.BannerPlugin('最终版权归aa所有'),
   new HtmlWebpackPlugin({
      template:'index.html'
    })
  ]

安装完毕可能仍旧报错，此时修改json文件

"html-webpack-plugin": "^3.2.0",

如果这样设置的化path里面的dist路径拼接便不需要了

js压缩

  1. 安装
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
  1. config文件内设置：
const uglifyJsPlugin=require('uglifyjs-webpack-plugin')
plugins:[
    new webpack.BannerPlugin('最终版权归aa所有'),
    new HtmlWebpackPlugin({
      template:'index.html'
    }),
      new uglifyJsPlugin()
  ]

搭建本地服务器

npm install --save-dev webpack-dev-server@2.9.3

config文件

module.exports={
...
	devServer:{
	    contentBase:'./dist',
	    //页面实时刷新
	    inline: true
	  }
  }

json文件最上面大括号设置运行后自动打开

 "dev": "webpack-dev-server --open"

运行server

npx webpack-dev-server

ctrl+c中止终端
再次打包

抽离config设置

  1. 首先抽离基本配置文件单独建立一个js文件，然后抽离production 以及dev时的config配置，目录在根目录
  2. 安装相应配置
npm install webpack-merge
  1. 需要合并的文件内设置
const webpackMerge=require('webpack-merge');
const baseConfig=require('./base.config');
 //第一个参数为引入的需要合并的文件，第二个参数内容为需要合并的内容
 module.exports=webpackMerge(base.config,
  {plugins:[
    new uglifyJsPlugin()   //打包时需要
  ]}
)
  1. 修改json文件内的
"scripts": {
   "build": "webpack --config ./build/prod.config.js",
    "dev": "webpack-dev-server --open --config ./build/dev.config.js"
  }

修改config文件中的path路径

path: path.resolve(__dirname, '../dist'),//动态获取打包后的文件路径,path.resolve拼接路径

最终配置好 的base.config.js

//1.导入node的path包获取绝对路径，需要使用npm init初始化node包
const path = require('path')
//获取webpack
const webpack = require('webpack')
//获取htmlWebpackPlugin对象
const htmlWbepackPlugin = require('html-webpack-plugin')

//2.配置webpack的入口和出口
module.exports = {
  entry: './src/aaa.js',//入口文件
  output:{
    path: path.resolve(__dirname, '../dist'),//动态获取打包后的文件路径,path.resolve拼接路径
    filename: 'bundle.js',//打包后的文件名
    // publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        test: /\.css$/,//正则表达式匹配css文件
        //css-loader只负责css文件加载，不负责解析，要解析需要使用style-loader
        use: [{
          loader: 'style-loader'
        }, {
          loader: 'css-loader'
        }]//使用loader
      },
      {
        test: /\.less$/,//正则表达式匹配css文件
        //css-loader只负责css文件加载，不负责解析，要解析需要使用style-loader
        use: [{
          loader: 'style-loader'
        }, {
          loader: 'css-loader'
        }, {
          loader: 'less-loader'//less文件loader
        }]//使用loader
      },
      {
        test: /\.(png|jpg|gif)$/,//匹配png/jpg/gif格式图片
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,//图片小于8KB时候将图片转成base64字符串，大于8KB需要使用file-loader
              name: 'img/[name].[hash:8].[ext]'//img表示文件父目录，[name]表示文件名,[hash:8]表示将hash截取8位[ext]表示后缀
            }
          }
        ]
      },
      {
        test: /\.js$/,
        //排除node模块的js和bower的js
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            //如果要使用@babel/preset-env这里需要在根目录新建一个babel的文件
            // presets: ['@babel/preset-env']
            //这里直接使用指定
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,//正则匹配.vue文件
        use: {
          loader: 'vue-loader'
        }
      }
    ]
  },
  resolve: {
    // alias:别名
    alias: {
      //指定vue使用vue.esm.js
      'vue$':'vue/dist/vue.esm.js'
    }
  },
  plugins:[
    new webpack.BannerPlugin('最终解释权归zz所有'),
    new htmlWbepackPlugin({
      template: 'index.html'
    })
  ]

}

最终配置好的dev.config

//导入webpack-merge对象
const webpackMerge = require('webpack-merge')
//导入base.config.js
const baseConfig = require('./base.config')

//使用webpackMerge将baseConfig和dev.config的内容合并
module.exports = webpackMerge(baseConfig, {
  devServer: {
    contentBase: './dist',//服务的文件夹
    port: 4000,
    inline: true//是否实时刷新
  }

})

最终配置好的prod.config

const uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
//导入webpack-merge对象
const webpackMerge = require('webpack-merge')
//导入base.config.js
const baseConfig = require('./base.config')

//使用webpackMerge将baseConfig和prod.config的内容合并
module.exports = webpackMerge(baseConfig, {
  plugins:[
    new uglifyjsWebpackPlugin()
  ]
})

最终配置好的package.json

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./build/prod.config.js",
    "dev": "webpack-dev-server --open --config ./build/dev.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.4",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^3.6.0",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.11.3",
    "style-loader": "^1.2.1",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^4.1.0",
    "vue-loader": "^13.0.0",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^3.12.0",
    "webpack-dev-server": "^2.9.3",
    "webpack-merge": "^4.1.5"
  },
  "dependencies": {
    "babel-preset-env": "^1.7.0",
    "less-loader": "^4.1.0",
    "vue": "^2.6.11"
  }
}
安薇拉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack打包常用配置项
09-05
本文将深入探讨 Webpack 的常用配置项，帮助你更好地理解和优化你的项目打包过程。 ### 1. `entry` `entry` 配置指定了项目的入口起点，Webpack 会从这里开始构建模块依赖图。它可以是一个字符串、对象或数组，用于...
配置一个完整项目的Webpack3.6
weixin_43803985的博客
08-02 1039
配置前提：确保安装了Node.js的最新版本 步骤： （1） 在本地安装Webpack.新建一个文件夹，里面存放工程文件。具体内容如下 主文件目录webpack_test。里面存放含有app.js、bar.js、导出生成的JavaScript文件index.html及用于打包文件配置的webpack.config.js 在命令行窗口运行命令：npm install --save-dev webpa...
vue 用webpack打包文件名添加版本号
五颜六色的白
02-03 1149
https://blog.csdn.net/qq_37337830/article/details/81507246 感谢博主分享，转载一下
vue 使用webpack打包的时候给文件名添加版本号
cccdf_jjj的博客
08-21 1686
有的时候用npm run build打包的时候发现打完包代码还是原来那套代码，新写的需求没在上面，这是咋回事，可能是浏览器缓存引起的，那我现在想看看我打的包的版本号，这样能更快的定位问题，下面上代码啦 找到webpack .prod.conf.js 1.定义版本变量： const Version = new Date().getTime(); // 这里使用的是时间戳 来区分 ，也可以自己定...
vue 用webpack打包文件名添加版本号/vue 打包之后的文件如何部署到express服务器上
qq_34507902的博客
05-26 2580
vue 用webpack打包文件名添加版本号: 因浏览器缓存原因导致vue 打包的文件 导致偶尔会出现不能即使更新最新代码。因此在打包的文件名中添加一个版本号以便浏览器能区分。 解决方法：找到webpack .prod.conf.js 1.定义版本变量： constVersion = new Date().getTime(); // 这里使用的是时间戳 来区分 ，也可以自己定义成别...
webpack 配置介绍
一杯清泉
03-28 1122
development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异，通过 webpack-merge 可以将基础的配置抽象到 webpack.base.js 中，开发环境和线上环境分别使用 webpack.dev.js 和 webpack.prod.js，然后 merge（webpack.base.js）即可。该功能在打包模式为production时，默认开启，在打包时候回检测是否有标识，有副作用，没有副作用在打包时候不会参与打包。当超过150KB 建议使用。
webpack打包vue项目基础配置
09-26
基于webpack4的一个针对vue基础项目的打包配置，对基础的vue项目进行简单的打包配置，可以支持less，scss，sass等css预编译，简单明了，教程：https://www.jianshu.com/p/81bfe6ba1c04
webpack打包node.js后端项目的方法
10-18
本文将详细介绍如何利用Webpack打包Node.js后端项目，包括必要的安装、配置步骤以及一个简单项目目录的构成。 知识点一：Webpack基础 Webpack可以看作是一个现代JavaScript应用程序的静态模块打包器。它在运行时...
详解webpack打包nodejs项目(前端代码)
10-18
Webpack 是一个流行的前端构建工具，它能够将 JavaScript、CSS、图片等各类前端资源打包成一个或多个可部署的文件。Webpack 打包 Node.js 项目（尤其是前端代码）的场景通常发生在前端应用需要与后端服务紧密结合时...
解决vue+webpack打包路径的问题
08-27
然而，在实际部署过程中，可能会遇到Vue和Webpack打包路径的问题，导致应用无法正常运行。本文将详细介绍如何解决Vue+Webpack打包路径的问题。 首先，理解问题的核心在于Vue Router的history模式。在history模式下...
webpack加入版本号打包
weixin_33787529的博客
05-19 3986
2019独角兽企业重金招聘Python工程师标准>>> ...
vue 用webpack打包文件名添加版本号
热门推荐
qq_37337830的博客
08-08 1万+
因浏览器缓存原因导致vue 打包的文件 导致偶尔会出现不能即使更新最新代码。因此在打包的文件名中添加一个版本号以便浏览器能区分。 解决方法：找到webpack .prod.conf.js    1.定义版本变量： const  Version = new Date().getTime(); // 这里使用的是时间戳 来区分 ，也可以自己定义成别的如：1.1     2.修改要生成的js和cs...
webpack 打包增加版本信息
cnmeimei的博客
08-17 967
What do we need？ 笔者目的是在vue项目打包后的 dist/index.html 文件中写入本次打包git用户、最后一次git提交信息，这样做的目的是便于线上项目的管理和防止同事之间的相互扯皮。最后打包出的效果如下图： How to do？ 版本信息需要记录 git最后一次提交作者（作者名和邮箱邮）、日期、commit HEAD，本次打包git用户和邮箱、日期，这些信息都需要使用 git 命令来获取到。在 node 中，要执行一段命令行脚步需要使用 child_process 模...
用webpack做一些前端打包时的性能优化
weixin_50379372的博客
07-04 1206
启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin。2.output:输出指示，webpack打包后的资源bundles输出到哪里去，以及如何命名。会将 process.env.NODE_ENV 的值设为 production。
webpack配置及打包操作（保姆级）
最新发布
weixin_55862915的博客
11-16 635
【保姆级】webpack配置与打包教程
webpack打包相关
m0_67031589的博客
03-11 120
整理笔记
webpack创建项目并打包的全流程
weixin_43867892的博客
10-25 2259
webpack会自动处理js之间相关的依赖,但是在开发中不仅仅有基本的js代码处理，也需要加载css、图片，将ES6转成ES5代码，将TypeScript转换成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等。添加对loader的依赖一般都是在terminal中npm install，然后在webpack.config.js文件中添加对其的配置。，其中src文件夹用于存放开发时写的js、css等文件，dist文件夹中存放打包后生成的bundle.js文件。
【前端开发】 浅析入门webpack的详细构建打包过程
go
05-07 536
文章目录webpack 简介webpack 安装使用webpack管理使用一个配置文件NPM 脚本完结 webpack 简介 webpack官网介绍: 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 webpack有四个核心 入口(entry) 输出.
webpack打包注入配置
08-04
在中，可以通过配置文件webpack.config.js来注入配置。在这个配置文件中，可以使用各种插件和加载器来定制打包过程。例如，可以使用HtmlWebpackPlugin插件来生成HTML文件，使用webpack内置的插件来访问内置功能。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值