webpack安装配置与常见使用过程详解（结合vue）

2024-09-27 07:16:12

webpack介绍和安装

webpack：前端模块化打包工具

安装webpack需要安装Node.js，Node.js自带软件包管理工具npm

查看自己的node版本：

node -v

全局安装webpack

cnpm install webpack -g

查看webpack版本

webpack --version

局部安装webpack

cnpm install webpack --save-dev

为什么全局安装之后还需要局部安装？

在终端直接执行webpack，使用的是全局webpack

如果在package.json中定义了script，其中包含了webpack命令，那么使用的是局部webpack

webpack基本使用过程

小案例：创建一个webpack目录，在里面创建dist目录和src目录

在src目录中创建mathUtils.js和main.js

mathUtils.js

function add(num1, num2){
 return num1 + num2;
}

function mul(num1, num2){
 return num1 * num2;
}

module.exports = {
 add, mul
}

main.js

const {add, mul} = require('./mathUtils.js');

console.log(add(2, 3));
console.log(mul(4, 5));

使用webpack将两个js打包

webpack ./src/main.js ./dist/bundle.js

报错：

ERROR in multi ./src/main.js ./dist/bundle.js
Module not found: Error: Can't resolve './dist/bundle.js' in 'C:\Users\96579\Desktop\webpack'

原因：我的版本是最新的webpack，所以有些命令不一样了

将以上代码修改为：

webpack ./src/main.js -o ./dist/bundle.js

（多了个 -o ）

dist目录下成功生成bundle.js

webpack.config.js配置和package.json配置

实现：将入口文件和出口文件放置到配置文件中，打包时直接使用简写webpack

npm init

在webpack目录中生成了package.json

然后输入以下代码，如果在package.json中有一些依赖的包，会自动安装好

cnpm install

然后在webpack目录中创建webpack.config.js

const path = require('path');

module.exports = {
 entry: './src/main.js',
 output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js'
 }
}

output中的path要求输入绝对路径，path.resolve用来拼接路径，__dirname获取当前项目的绝对路径

接下来就可以使用webpack来进行打包，不再需要在打包时再加上入口文件和输出文件

实现：将webpack映射到npm run build

修改package.json，加入映射

最新版的写法是：

"dev": "webpack --mode deveplopment",
"build": "webpack --mode production"

这样的话，webpack执行时默认会先找本地的webpack，再去找全局的webpack

通常项目中，除了安装全局的webpack，每个项目也会有独立的webpack，而刚才我们只安装了全局webpack，因此现在来安装下局部的

并且这个webpack包是开发时的依赖，因此加上--save-dev

cnpm install webpack --save-dev

知识点：只要是在命令行输入webpack，默认都是找的全局。如果是在package.json中添加的映射，默认是找的本地

webpack中使用css文件的配置

安装style-loader和css-loader

cnpm install style-loader --save-dev
cnpm install --save-dev css-loader

配置webpack.config.js

代码：

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

webpack-less文件的处理

安装less-loader

cnpm install --save-dev less-loader less

配置

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
   }]
  }]
 }
};

代码如下

webpack-图片文件的处理

安装url-loader

cnpm install --save-dev url-loader

配置

module.exports = {
 module: {
 rules: [
  {
  test: /\.(png|jpg|gif)$/,
  use: [
   {
   loader: 'url-loader',
   options: {
    limit: 8192
   }
   }
  ]
  }
 ]
 }
}

【实际开发过程中，一般建议把limit设置成8kb】

注意，当图片大于limit中设置的尺寸时，需要安装file-loader

cnpm install file-loader --save-dev

webpack会把打包好的文件放到dist目录中，需要在webpack.config.js中使用publicPath指定文件的路径

然后再运行

npm run build

webpack-ES6转ES5的babel

安装

cnpm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack

配置

module: {
 rules: [
 {
  test: /\.js$/,
  exclude: /(node_modules|bower_components)/,
  use: {
  loader: 'babel-loader',
  options: {
   presets: ['@babel/preset-env']
  }
  }
 }
 ]
}

webpack设置vue的配置过程

引入vue.js

cnpm install vue --save

使用vue进行开发测试

main.js

const app = new Vue({ el: '#app', data: { message: 'webpack & vue' }})

index.html

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Document</title>
 </head>
 <body>
 <div id="app">
  <h2>{{message}}</h2>
 </div>
 <script src="./dist/bundle.js"></script>
 </body>
</html>

使用完整版本，修改配置

module.exports = {
 // ...
 resolve: {
 alias: {
  'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
 }
 }
}

安装vue-loader和vue-template-compiler

cnpm install -D vue-loader vue-template-compiler

webpack配置

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
 module: {
 rules: [
  // ... other rules
  {
  test: /\.vue$/,
  loader: 'vue-loader'
  }
 ]
 },
 plugins: [
 // make sure to include the plugin!
 new VueLoaderPlugin()
 ]
}

webpack-横幅plugin的使用

配置webpack.config.js

const webpack = require('webpack')
...
plugins: [
 new webpack.BannerPlugin('最终版权归cyy所有')
 ],

npm run build之后，查看dist目录下的bundle.js

webpack-HtmlWebpackPlugin的使用

打包html的plugin

cnpm install --save-dev html-webpack-plugin

配置

const HtmlWebpackPlugin = require("html-webpack-plugin");
...
 plugins: [
 new HtmlWebpackPlugin(),
 ],

运行npm run build，会在dist目录中生成index.html

webpack-UglifyjsWebpackPlugin的使用

帮助压缩js

cnpm i -D uglifyjs-webpack-plugin

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
 plugins: [
 new UglifyJsPlugin()
 ]
}

不过现在新版本默认生成的bundle.js好像就是压缩过的

webpack-dev-server搭建本地服务器

每次改变代码后，进行npm run build打包，开发效率比较低

webpack提供了一个可选的本地服务器，基于node.js，使用express框架，可以让浏览器实时刷新修改后的效果

cnpm install --save-dev webpack-dev-server

webpack.config.js

package.json

npm run start 开启服务

浏览器自动调用localhost:8080

修改代码，不用再重复代码，已经可以看到浏览器的内容实时更新了

webpack配置文件的分离

在webpack目录下创建build目录，放入3个配置的js文件

cnpm install webpack-merge --save-dev

开发时环境 dev.config.js

const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

//开发时
module.exports = (baseConfig, {
 devServer: {
  contentBase: "./dist",
 },
});

生产时环境 prod.config.js

const webpackMerge = require("webpack-merge");
const baseConfig = require("./base.config");
//生产时
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = (baseConfig, {
 plugins: [new UglifyJsPlugin()],
});

公共环境 base.config.js

const path = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
 entry: "./src/main.js",
 output: {
  path: path.resolve(__dirname, "dist"),
  filename: "bundle.js",
  publicPath: "dist/",
 },
 module: {
  rules: [
   {
    test: /\.css$/,
    use: ["style-loader", "css-loader"],
   },
   {
    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
     },
    ],
   },
   {
    test: /\.(png|jpg|gif)$/,
    use: [
     {
      loader: "url-loader",
      options: {
       //  limit小于8192时，使用base64格式
       //  Limit大于8192时，需要额外安装file-loader
       limit: 8192,
      },
     },
    ],
   },
   {
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
     loader: "babel-loader",
     options: {
      presets: ["@babel/preset-env"],
     },
    },
   },
   {
    test: /\.vue$/,
    loader: "vue-loader",
   },
  ],
 },
 plugins: [
  // make sure to include the plugin!
  new VueLoaderPlugin(),
  new webpack.BannerPlugin("最终版权归cyy所有"),
  new HtmlWebpackPlugin(),
 ],
 resolve: {
  alias: {
   vue$: "vue/dist/vue.esm.js", // 用 webpack 1 时需用 'vue/dist/vue.common.js'
  },
 },
};

删除原先项目目录下的webpack.config.js

修改package.json指定配置文件

此时打包后的文件会在build目录下的dist目录中，如果还是想生成到项目目录下的dist目录中，就需要修改base.config.js中的路径

总结

到此这篇关于webpack安装配置与常见使用过程详解（结合vue）的文章就介绍到这了,更多相关webpack安装配置使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

浅谈Webpack下多环境配置的思路

前言由于前后端分离的前端应用脱离了后端的支持,在单独开发前端应用时,页面调试时使用固定的开发环境地址还好,如果出现在本地开发时需要调试不同环境的远端API,或者需要将应用部署到不同环境的服务器上时,如果不将这些环境对应的服务器地址.环境专属变量等单独配置,也许每次切换环境都需要修改大量代码.网上关于这部分的资料较少,所以下面将以用vue-cli init命令生成的Vue/Webpack项目作为例子,介绍一下我当前正在使用的简单的多环境配置的思路. 1.理想中的多环境配置在后端开发中,项目中不
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解

webpack,我想大家应该都知道或者听过,Webpack是前端一个工具,可以让各个模块进行加载,预处理,再进行打包.现代的前端开发很多环境都依赖webpack构建,比如vue官方就推荐使用webpack.废话不多说,我们赶紧开始吧. 第一步.安装webpack 新建文件夹webpack->再在webpack下面新建demo->命令行切换到demo目录,使用npm init --yes 初始化项目的package.json文件,然后执行npm install webpack --save-de
webpack配置proxyTable时pathRewrite无效的解决方法

本人webpack版本3.6,webpack-dev-server版本2.9.1,本人按照网上写的版本折腾两天都没通,无意间自己试通了,猜测网上大部分都是照本宣科,没有自己实践 webpack配置接口地址代理在项目开发中,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们在本地启动服务器后,比如本地开发服务下是 http://localhost:8080 这样的访问链接,但是我们的接口地址是 http://www.xxx.com/save/post 这样的,我们这样
webpack4.x下babel的安装、配置及使用详解

前言目前,ES6(ES2015)这样的语法已经得到很大规模的应用,它具有更加简洁.功能更加强大的特点,实际项目中很可能会使用采用了ES6语法的模块,但浏览器对于ES6语法的支持并不完善.为了实现兼容,就需要使用转换工具对ES6语法转换为ES5语法,babel就是最常用的一个工具.那么在webpack中如何使用babel呢?这是本篇文章要探讨的问题. 写这篇文章的目的还在于最新webpack版本的一些操作方式已经变化.babel也在不断更新,以往的一些资料或者教程已不适合.笔者对webpack最
用npm安装vue和vue-cli,并使用webpack创建项目的方法

一.npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3.0 #升级 npm cnpm install npm -g 二.在用 Vue.js 构建大型应用时推荐使用 NPM 安装: # 最新稳定版 $ cnpm install vue 三.Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用. # 全局安装 vue-cli $ cnpm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ v
windows下vue-cli及webpack搭建安装环境

1.安装Node.js,node.js安装包及源码下载地址为:https://nodejs.org/en/download/. 2.安装npm,由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了.同样可以通过输入 "npm -v" 来测试是否成功安装.命令如下,出现版本提示表示安装成功: $ npm -v 3.10.8 如果你安装的是旧版本的 npm,可以很容易得通过 npm 命令来升级,命令如下: npm install npm -g 你可以使用淘宝定制的 cnpm
详解浏览器缓存和webpack缓存配置

浏览器缓存浏览器缓存分为两种类型: 强缓存:也称为本地缓存,不向服务器发送请求,直接使用客户端本地缓存数据协商缓存:也称304缓存,向服务器发送请求,由服务器判断请求文件是否发生改变.如果未发生改变,则返回304状态码,通知客户端直接使用本地缓存:如果发生改变,则直接返回请求文件. 浏览器缓存机制的过程如下: 强缓存(本地缓存) 强缓存是最彻底的缓存,无需向服务器发送请求,通常用于css.js.图片等静态资源.浏览器发送请求后会先判断本地是否有缓存.如果无缓存,则直接向服务器发送请求:如果有
webpack安装配置与常见使用过程详解（结合vue）

webpack介绍和安装 webpack:前端模块化打包工具安装webpack需要安装Node.js,Node.js自带软件包管理工具npm 查看自己的node版本: node -v 全局安装webpack cnpm install webpack -g 查看webpack版本 webpack --version 局部安装webpack cnpm install webpack --save-dev 为什么全局安装之后还需要局部安装? 在终端直接执行webpack,使用的是全局webpack
java property配置文件管理工具框架过程详解

这篇文章主要介绍了java property配置文件管理工具框架过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 property property 是 java 实现的 property 框架. 特点优雅地进行属性文件的读取和更新写入属性文件后属性不乱序灵活定义编码信息使用 OO 的方式操作 property 文件支持多级对象引用快速开始环境依赖 Maven 3.x Jdk 1.7+ Maven 引入依赖 <depende
Mysql服务器的安装配置与启动关闭方法详解

1.官网下载: https://dev.mysql.com/downloads/ 找到Mysql Community Server 点击点击download下载,可以选择下载路径,我下载在d盘: 下载好了需要: 新建mysql.ini文件内容: [mysql] 设置mysql客户端默认字符集 default-character-set=utf8 [mysqld] #设置3306端口 port = 3306 设置mysql的安装目录 basedir=D:\java web\mysql\mysq
SpringBoot配置拦截器实现过程详解

目录如何配置拦截器拦截器设置容易出现的问题如何取消拦截操作实例-登录验证如何配置拦截器 step1: 自定义拦截器 /** * 自定义拦截器 */ public class MyInterceptor implements HandlerInterceptor { private static final Logger logger = LoggerFactory.getLogger(MyInterceptor.class); /** * 在请求匹配controller之前执行,返回t
卸载安装Node.js与npm过程详解

下面记录一下在本地 Windwos 环境用 vagrant 搭建的虚拟机(Homestaead)和生产环境阿里云 CentOS 系统安装 Node.js 的步骤,以及 npm 安装依赖的不同之处. 使用源码编译的方式安装 node.js.首先将机子上的 Node.js 卸载,我直接贴上 Stack Overflow 上提供的步骤: 1.卸载 npm 和 Node.js 先卸载 npm,命令是:sudo npm uninstall npm -g,然后卸载 Node.js. Running whic
CentOS安装配置MySQL8.0的步骤详解

前言这里记录下在CentOS 上,安装配置MySQL的步骤: 正文下载yum源的安装包 yum localinstall https://repo.mysql.com//mysql80-community-release-el7-1.noarch.rpm 安装 yum install mysql-community-server 启动服务 service mysqld start 查看状态 service mysqld status 查看初始密码 grep 'temporary passwo
CentOS 7下安装 redis 3.0.6并配置集群的过程详解

安装依赖 [root@centos7-1 ~]# yum -y install gcc openssl-devel libyaml-devel libffi-devel readline-devel zlib-devel gdbm-devel ncurses-devel gcc-c++ automake autoconf 安装 redis [root@centos7-1 ~]# wget http://download.redis.io/releases/redis-3.0.6.tar.gz [
Win10配置redis服务实现过程详解

一,Windows安装: 下载地址:https://github.com/MicrosoftArchive/redis/releases/tag/win-3.2.100 (redis官网没有window版本所以需要在github上下载): 装Redis-x64-3.2.100.msi,双击刚下载好的msi格式的安装包(Redis-x64-3.2.100.msi)开始安装. 选择"同意协议",点击下一步继续. 选择"添加Redis目录到环境变量PATH中",这样方便系
docker machine安装极狐gitlab的过程详解

目录 1. 环境信息 1.1 主机信息 1.2 配置信息 1.3 环境初始化 1.4 升级内核 1.5 安装 docker 1.6 安装 docker machine 2. 安装极狐gitlab 2.1 获取可用的极狐gitlab镜像tags 2.2 设置环境变量 2.3 创建 docker host 2.4 连接到 docker host 2.5 创建极狐gitlab容器 2.6 访问极狐gitlab 1. 环境信息 1.1 主机信息主机用途 10.10.10.60 极狐gitlab 1.
SpringAOP事务配置语法及实现过程详解

配置事务: 使用的tx前缀的标签, 导入tx的命名空间配置事务管理器 , 把事务管理器交给Spring管理: <bean id="txManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">  <property name="dataSource" ref="

webpack安装配置与常见使用过程详解（结合vue）

相关推荐

随机推荐