webpack4打包js

webpack可以将js、css等静态资源打包成一个文件，减少了请求，提高网页运行速度

创建一个文件夹webpackdemo，使用npm init -y 命令进行初始化，再使用npm install -g webpack webpack-cli命令进行webpack的安装
安装好后使用webpack -v命令进行测试，若输出版本号，则证明安装成功
创建src和dist文件夹，src下创建三个js文件

common.js

exports.info=function (str){

document.write(str)

}

utils.js

exports.add=function (a,b){

return a+b

}

index.js，引入了前两个js，并进行调用

const common = require(’./common’)

const utils = require(’./utils’)

common.info("hello common "+utils.add(1,2))
src下再创建webpack.config.js配置文件，文件名固定，填充如下

const path=require(“path”)//node.js内置模块

module.exports={

entry: ‘./src/index.js’,//入口文件

output: {

path: path.resolve(__dirname,’./dist’),//输出路径，_dirname表示当前文件所在路径

filename: ‘main.js’//打包后的文件名

}

}
我的webpack版本是4，这个版本配置中的entry会默认指定src下的index.js，入口文件名需要为index.js，不能为其他名字，如main.js。不然会出错！查了好久最终在stack overflow上找到了答案,github上提交issues去问的人也非常多！注意！
直接使用webpack命令进行打包，也可以指定使用另一个命令webpack --mode=development指定mode，dist目录下会多一个js文件，里面是一长串已经打包好了的看不懂的东西

(()=>{var o={648:(o,n)=>{n.info=function(o){document.write(o)}},555:(o,n)=>{n.add=function(o,n){return o+n}}},n={};function r(t){var e=n[t];if(void 0!==e)return e.exports;var i=n[t]={exports:{}};return ot,i.exports}(()=>{const o=r(648),n=r(555);o.info("hello common "+n.add(1,2))})()})();
开始进行测试，在文件夹webpackdemo下创建01.html，引入刚才打包好的js文件

<script src="dist/main.js"></script>
运行html，在浏览器中查看，发现有输出，测试成功，输出内容如下

hello common 3

webpack4打包js相关推荐

Vue——10 - webpack打包保姆级教程01——打包js、json、css、less、html、背景图片以及图片、字体（Font）文件，devsever，生产环境配置以及css的兼容写法
目录一.webpack打包JS文件 1.新建入口文件index.js和mathUtils.js,index.js是依赖于mathUtils.js 2.然后使用webpack命令打包js文件二.打包 ...
webpack4打包优化
layout: post title: webpack4打包优化 categories: webpack tags: webpack4打包优化针对vue cli3.0+,webpack4.0+,no ...
Ant编译编译APK、打包打包JS
Ant编译编译APK.打包打包JS Base on Apache Ant 1.8.4 一.Apache Ant 维基百科:http://zh.wikipedia.org/wiki/Apache_Ant ...
webpack 深入浅出分析之打包 JS、ES6 和 Typescript
一.webpack 打包 JS 文件通过 npm install webpack 命令可以下载 webpack,通过 npm install webpack-cli -g 命令下载 webpack- ...
webpack打包js/css/scss/less/styl等（可以打包图片）
Webpack 1. 什么是webpack? 打包,压缩各种静态资源的工具(css,js,图片,图标等) 2.目的性能优化减少浏览器向服务端请求的次数节约服务器的的带宽资源 3.如何使用介绍 ...
RequireJs按需要加载angular模块和依赖，并且用r.js压缩打包js和css文件实现加载优化（图文）。
RequireJS 是一个JavaScript模块加载器,使用RequireJS加载模块化脚本将提高代码的加载速度和质量.而且能保证其他依赖angular插件前提下才能使用的组件比如像自定义的指令和路 ...
Webpack打包流程系列一：打包JS（JavaScript）文件
前情提示 webpack是什么? 简单而言,webpack是一个模块打包器.它的主要目标是将JavaScript文件打包在一起,打包后的文件用于在浏览器中使用. 使用webpack的目的当前端项目的 ...
webpack打包js文件的问题
前言这里记录下webpack打包js文件的配置和遇到的问题.因环境版本等不同,解决办法未必都是通用的,仅作为大家参考之用: 我的环境配置 macOS M1 系统 webpack版本:(全局版本)we ...
前端打包js文件的工具 webpack
前端打包js文件的工具 webpack 安装webpack工具 npm install -g webpack webpack-cli 创建js文件用于打包操作即在一个最终的js文件中引入其它的js文 ...
webpack4打包多个js文件
默认文件目录: 1.多个js文件不合并打包(分别打包) 配置文件./conf/webpack.dev.js const path = require("path"); module ...

webpack4打包js

webpack可以将js、css等静态资源打包成一个文件，减少了请求，提高网页运行速度

webpack4打包js相关推荐

最新文章

热门文章