简单使用webpack打包文件的实现
没有安装node的同学请先安装node。
安装
npm i -g webpack
编写配置文件
假设我们有两个js文件需要打包,1.js和mode1.js,我们在1.js里面引入mode1.js模块
mode1.js 模块:
export default { sum(...arg){ let s=0; arg.forEach(item=>{ s+=item; }); return s } }
一个简单的求和函数,default的意思是把整个模块都暴露出去
1.js:
import common from './mode1' window.onload=function(){ document.onclick=function(){ alert(common.sum(12,43,65,8,7,98)) } }
其中的common是自己命名的
我们把1.js作为入口文件编写webpack配置文件,对webpack的操作都在这个配置文件里面写,默认名字webpack.config.js
webpack.config.js:
const pathlib = require('path'); module.exports = { entry: { index:'./src/1', ym:'./src/2' }, output: { path: pathlib.resolve('dest/'), filename: '[name].bundle.js' } }
这里面有两个核心参数entry和output入口和出口,入口可以是多入口,如果写成多入口就写成json文件,出口的path选项是配置输出的文件路径,必须是绝对路径,所以这里引了path模块,filename是输出文件的名字,[name].是占位符,输出多文件入口的时候用到、
编译
最后在项目目录执行 webpack 编译命令就可以了
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
vue+webpack 打包文件 404 页面空白的解决方法
最近用vue-cli+vue-router+webpack建立项目,其中的遇到的三个问题,整理如下: vue-cli+ webpack 建立的项目,cnpm run build 打包项目之后,需要放在http服务器上才可以运行, 例如 :nginx vue单页面的启动页面是index.html,路由的路径实际是不存在的,所以会出现刷新页面404的问题,需要设置所有找不到的路径直接映射到index.html 1 刷新页面404 配置启动文件的index页面的路径root: D:/workPlace
-
彻底解决 webpack 打包文件体积过大问题
webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大.下面就来讲下如何从多个方面进行优化. 去除不必要的插件 刚开始用 webpack 的时候,开发环境和生产环境用的是同一个 webpack 配置文件,导致生产环境打包的 JS 文件包含了一大堆没必要的插件,比如 HotModuleReplacementPlugin, NoErrorsPlugin... 这时候不管用什么优化方式,都没多大效果.所以,如果你打包后的文件非常大的话,先检查下是不是包含了
-
详解webpack 打包文件体积过大解决方案(code splitting)
优化对比 : 未优化前:index.html引入一个main.js文件,体积2M以上. 优化后入:index.html引入main.js.commons.js.charts.js.other.js.以达到将main.js平分目的.每个文件控制300k以内.(如果高兴100k也没问题) 用到的一堆库及工具: vue.webpack.babel.highcharts.echarts.jquery.html2canvas******此去省略若干m代码 问题: 开发环境用webpack后发现单个js文件
-
简单使用webpack打包文件的实现
没有安装node的同学请先安装node. 安装 npm i -g webpack 编写配置文件 假设我们有两个js文件需要打包,1.js和mode1.js,我们在1.js里面引入mode1.js模块 mode1.js 模块: export default { sum(...arg){ let s=0; arg.forEach(item=>{ s+=item; }); return s } } 一个简单的求和函数,default的意思是把整个模块都暴露出去 1.js: import common
-
浅谈webpack打包之后的文件过大的解决方法
以前一直使用 create-react-app 这个脚手架进行 react 开发,后面因为一些自定义的配置,转而使用 webpack 搭建一套自己的脚手架.但是在使用 webpack 打包之后发现,纳尼?怎么文件这么大??? 于是研究了一下如何处理 webpack 打包之后文件太大的情况,简单记录下来. 首先配置全局变量 首先,通过指定环境,告诉 webpack 我们当前处于 production 环境中,要按照 production 的方式去打包. //指定环境,将process.env.NO
-
浅谈webpack打包生成的bundle.js文件过大的问题
问题 使用webpack进行打包时,发现bundle.js竟然有2M多. 解决办法 网上有去除插件.提取第三方库.压缩代码等方法. 还有一个比较容易忽略的原因就是开了sourcemap 在生产环境中,应使用devtool: false 关闭sourcemap后bundle.js的大小从2.46M降到302k 以上这篇浅谈webpack打包生成的bundle.js文件过大的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 彻底解决 webpa
-
利用CDN加速react webpack打包后的文件详解
此文不介绍webpack基本配置,如果对基本配置有疑问请查阅官方文档. 1.配置webpack.config.js 将output.publicPath改成上传到的cdn地址, 例(对应上面上传配置): publicPath: "https://your_base_cdn_url" + process.env.NODE_ENV + "/cdn/" 打包 NODE_ENV=production node_modules/webpack/bin/webpack.js -
-
详解vue-cli快速构建vue应用并实现webpack打包
Vue是什么,是一套构建用户界面的渐进式框架(官网解释),什么叫渐进式框架呢,简单回答就是主张最少,这些概念只能自己去看,自己去理解,一千个读者一千个哈姆雷特,不过多的解释.Vue官方文档很全面的. Vue两大核心思想,组件化和数据驱动,组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用,数据驱动是前端的未来发展方向,释放了对DOM的操作,让DOM随着数据的变化自然而然的变化(尤神原话),不必过多的关注DOM,只需要将数据组织好即可. 一.什么是vue-cli vue-cli是由
-
webpack打包node.js后端项目的方法
本文介绍了webpack打包node.js后端项目的方法,分享给大家,具体如下: 安装依赖 复制代码 代码如下: npm install --save-dev webpack babel-loader babel-preset-es2015 babel-preset-stage-0 webpack配置 webpack.config.js 'use strict'; const webpack = require('webpack'); let externals = _externals();
-
Webpack打包字体font-awesome的方法示例
使用webpack构建font-awesome或者bootstrap的时候,最常见的一个问题就是构建字体文件的问题.经常会出现无法找到字体文件的问题.下面就讲一下如何正确构建引入字体文件: 1. 首先安装依赖: 复制代码 代码如下: npm install style-loader css-loader file-loader font-awesome-webpack --save-dev 2. 在入口文件中引入font-awesome require('font-awesome-webpack
随机推荐
- OracleOraDb10g_home1TNSListener服务无法启动怎么解决
- cmd goto命令 流程跳转
- Java生成CSV文件实例详解
- Oracle中使用DBMS_XPLAN处理执行计划详解
- JavaScript延时效果比较不错的
- PHP 文件系统详解
- php 数组随机取值的简单实例
- 基于Java ActiveMQ的实例讲解
- C++跳转语句之Goto对变量定义的影响详解
- 关于PHPDocument 代码注释规范的总结
- python实现带错误处理功能的远程文件读取方法
- ajax实现标签导航
- 用js绘图
- setInterval 和 setTimeout会产生内存溢出
- PHP变量赋值、代入给JavaScript中的变量
- jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
- IP Spoof技术介绍(IP 欺骗)
- asp.net 页面间传值与跳转的区别
- 初步解析Python中的yield函数的用法
- XP的局域网互访