简单使用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 编译命令就可以了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 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 打包文件体积过大解决方案（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 打包文件体积过大问题

    webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大.下面就来讲下如何从多个方面进行优化. 去除不必要的插件 刚开始用 webpack 的时候,开发环境和生产环境用的是同一个 webpack 配置文件,导致生产环境打包的 JS 文件包含了一大堆没必要的插件,比如 HotModuleReplacementPlugin, NoErrorsPlugin... 这时候不管用什么优化方式,都没多大效果.所以,如果你打包后的文件非常大的话,先检查下是不是包含了

  • 简单使用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打包之后的文件过大的解决方法

    浅谈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-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

随机推荐