详解如何使用webpack打包JS
如何使用webpack打包JS
我们在命令行中输入:webpack -h看看webpack的命令行大全
Usage: webpack-cli [options] webpack-cli [options] --entry <entry> --output <output> webpack-cli [options] <entries...> --output <output>
webpack告诉我们,用webpack进行打包有三种方法:
1.新建为webpack.config.js命名的文件,可以直接webpack命令打包
2.webpack 入口文件<app.js> -o 输出文件<bundle.js>
3.webpack --config 你自定义的文件名字<webpack-default.js>
新建一个目录,新建一个sum.js文件,这个文件主要是用es6 module暴露一个加法函数方法:
// sum.js export default function sum(a, b) { return a + b; }
然后新建一个app.js入口文件(webpack要打包这个文件)
// app.js // es6 module规范 import sum from './sum' // 调用 console.log('sum(23,24) = ', sum(23, 24));
下面进行打包:
webpack app.js -o bundle.js
如果打包成功显示:
Hash: 7e137d767d2665688484 Version: webpack 4.5.0 Time: 588ms Built at: 2018-6-20 20:30:06 Asset Size Chunks Chunk Names 0.bundle.js 188 bytes 0 [emitted] bundle.js 1.84 KiB 1 [emitted] main Entrypoint main = bundle.js [0] ./app.js + 1 modules 466 bytes {1} [built] | ./app.js 411 bytes [built] | ./sum.js 55 bytes [built] [1] ./minus.js 54 bytes {1} [built] [2] ./muti.js 114 bytes {0} [built]
GitHub 我们一起学习webpack地址:https://github.com/liangfengbo/learning-webpack
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
webpack打包单页面如何引用的js
目录结构如下图所示: webpack打包代码如下: var webpack = require('webpack'); var fs = require('fs'); var path = require('path'); var fse = require('fs-extra'); const debug = process.env.NODE_ENV !== 'production'; function entries(jsPath) { var dirnames = fs.readdirSy
-
webpack打包js的方法
Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 在代码实践之前,先说一写webpack的基础知识. 1.为什要使用WebPack 现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包.为了简化开发的复杂度,前端社区涌现出了很多好的实践方法 模块化,让我们可以把复杂的程序细化为小的文件; 类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能
-
webpack打包js文件及部署的实现方法
下面看下webpack打包js文件的实现代码 const path = require('path') const webpack = require('webpack') const htmlWebpackPlugin = require('html-webpack-plugin') // 每次打包之前,自动删除文件夹 const cleanWebpackPlugin = require('clean-webpack-plugin') // 分离 css 到独立的文件中 const Extra
-
webpack 打包压缩js和css的方法示例
打包压缩js与css 由于webpack本身集成了UglifyJS插件(webpack.optimize.UglifyJsPlugin)来完成对JS与CSS的压缩混淆,无需引用额外的插件, 其命令 webpack -p 即表示调用UglifyJS来压缩代码,还有不少webpack插件如 html-webpack-plugin 也会默认使用UglifyJS. uglify-js的发行版本只支持ES5,如果你要压缩ES6+代码请使用开发分支. UglifyJS可用的选项有: parse
-
webpack 单独打包指定JS文件的方法
背景 最近接到一个需求,因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改.因此,需要用webpack单独打包指定文件. CommonsChunkPlugin module.exports = { entry: { app: APP_FILE // 入口文件 }, output: { publicPath: './dist/', //输出目录,index.html寻找资源的地址 path: BUILD_PATH, // 打包目录 filen
-
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();
-
Vue.js中用webpack合并打包多个组件并实现按需加载
前言 随着移动设备的升级.网络速度的提高,用户对于web应用的要求越来越高,web应用要提供的功能越来越.功能的增加导致的最直观的后果就是资源文件越来越大.为了维护越来越庞大的客户端代码,提出了模块化的概念来组织代码.webpack作为一种模块化打包工具,随着react的流行也越来越流行. 使用 Vue 开发项目时,如果要使用其单文件组件特性,必然要使用 webpack 或者 browserify 进行打包,对于大型应用,为了提升加载速度,可以使用 webpack 的 code split 功能
-
webpack将js打包后的map文件详解
类似于这样的map文件 由webpack自动生成 参数: devtool: '#eval-source-map',//映射js到原文件 由于打包后的js调试不方面,所以应用此,自动映射报错到原文件 还是很有用的 同样的css设置如下 { test: /\.css$/, loader: 'style-loader!css-loader?sourceMap' } 以上这篇webpack将js打包后的map文件详解是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴
-
浅谈webpack打包生成的bundle.js文件过大的问题
问题 使用webpack进行打包时,发现bundle.js竟然有2M多. 解决办法 网上有去除插件.提取第三方库.压缩代码等方法. 还有一个比较容易忽略的原因就是开了sourcemap 在生产环境中,应使用devtool: false 关闭sourcemap后bundle.js的大小从2.46M降到302k 以上这篇浅谈webpack打包生成的bundle.js文件过大的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 彻底解决 webpa
-
详解如何使用webpack打包JS
如何使用webpack打包JS 我们在命令行中输入:webpack -h看看webpack的命令行大全 Usage: webpack-cli [options] webpack-cli [options] --entry <entry> --output <output> webpack-cli [options] <entries...> --output <output> webpack告诉我们,用webpack进行打包有三种方法: 1.新建为webpa
-
详解如何使用webpack打包Vue工程
使用webpack打包Vue工程 前言 入行一年,从什么都不懂的小白,到现在什么都懂一点的小白,也算是飞跃了.感叹一下现在的前端,从nodejs出来到现在各种各样的工具如雨后春笋般的出现.大神们疯狂的造轮子,玩的不亦乐乎.我等小白们,疯狂追赶,学的心肝脾肺都快衰竭.而我的精力也仅限浅尝辄止,但是学多一点总有好处的.本篇文章就是介绍如何使用webpack构建前端工程. 目标 本次的工程以Vue.js为主角,Vue.js是一款小巧优雅而且强大的轻量级mvvm框架,配合webpack模块化打包.制作出
-
详解如何用webpack打包一个网站应用项目
本文介绍了如何用webpack打包一个网站应用,现在分享给大家,有需要的可以了解一下 随着前端技术的发展,越来越多新名词出现在我们眼前.angularjs.react.gulp.webpack.es6.babel--新技术出现,让我们了解了解用起来吧!今天我来介绍一下如何用webpack打包一个网页应用. 一般我们写页面,大概都是这样的结构: index.html css style.css js index.js ........... 这样我们的html里直接引用css和js,完成一个网页应
-
详解如何使用webpack打包多页jquery项目
虽然已经2019年了 不过有一些项目 还是需要用到jquery的 不过考虑到使用jquery的一堆兼容性问题 也为了可以顺利地使用ES6来撸代码 研究使用webpack+babel打包代码来发布 几个重点: 1.为了将模块分割加载,不至于一个js文件过大,一个页面中使用多个js文件 2.由于是多页项目(多个html),每个页面使用的js文件都不一致 基于以上两点,需要配置多个入口文件 3.会把小图片转换成base64,所以可能css转成的js文件会比较大,所以css文件都单独设置入口js 例如,
-
详解window启动webpack打包的三种方法
什么是Webpack WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用. 1.在cmd终端执行 npx webpack命令 2.在package.json文件同级建立webpack.config.js文件,内容如下: const path = require('path'); module.exports = { entry: './
-
详解weex默认webpack.config.js改造
本文介绍了weex默认webpack.config.js改造,分享给大家,具体如下: 解决的问题: 由于weex默认的webpack配置,会导致在src文件夹下的每一个.vue在temp文件夹下生成对应的一个.js文件,该js文件有一段这样的代码 contents += 'var App = require(\'' + relativePath + '\')\n'; contents += 'App.el = \'#root\'\n'; contents += 'new Vue(App)\n';
-
详解vue静态资源打包中的坑与解决方案
本文主要解决 ①.vue-cli默认配置打包后部署至特定路径下静态资源路径错误问题; ②.静态资源打包使用相对路径后css文件引入大图片路径错误问题. 1.问题 vue-cli 脚手架生成的默认打包配置文件情况下运行 npm run build 打包后,部署项目至特定路径下:如: //ip:port/public/springActivity/ 此时访问: http://ip:port/public/springActivity/index.html index.html 可以正常访问,但是引用
-
详解Vue+elementUI build打包部署后字体图标丢失问题
错误描述: Vue+elementUI build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现: 控制台报错截图 dom渲染展示 解决方法: webpack module配置:(build目录下webpack.base.conf.js) module: { rules: [ ...(config.dev.useEslint ? [createLintingRule()] : []), { test: /\.(
-
详解Vue项目的打包方式(生成dist文件)
目录 一.相关配置 情况一(使用的工具是 vue-cil) 情况二(使用的工具是 webpack) 二.打包 一.相关配置 情况一(使用的工具是 vue-cil) 如果是用 vue-cli 创建的项目,则项目目录中没有 config 文件夹,所以我们需要自建一个配置文件:在根目录 src 下创建文件 vue.config.js,需注意文件名称必须是 vue.config.js,然后在文件中插入以下代码: //打包配置文件 module.exports = { assetsDir: 'static
随机推荐
- ASP连接Access数据库的几种方法
- Oracle常用dump命令,记录一下备查。
- js面向对象编程总结
- 精美漂亮的php分页类代码
- PHP cdata 处理(详细介绍)
- php实现URL加密解密的方法
- 使用maven+eclipse搭建struts2开发环境
- MYSQL建立外键失败几种情况记录Can't create table不能创建表
- mysql存储过程 游标 循环使用介绍
- 安装配置Zabbix来监控MySQL的基本教程
- smarty 原来也不过如此~~呵呵
- 获取目录下所有文件名的代码
- javascript中的事件代理初探
- 3个效果超酷的FORM表单美化效果 打包下载
- 利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
- oracle 11g em重建报唯一约束错误解决方法
- 10元打造三机互联方案
- 网站备案的五个非常规性问题答疑
- Android 标准Intent的使用详解
- Android ListView与RecycleView的对比使用解析