一、基础打包

1.1 创建项目目录,使用npm init初始化

mkdir webpack-demo && cd webpack-demo
npm init

初始化完成后，目录下会生成package.json

1.2 按照 webpack 4以上还需要安装webpack-cli

npm install --save-dev webpack webpack-cli

1.3 直接运行命令

webpack "js文件名"

二、配置打包

2.1 添加webpack.config.js文件

const path = require("path");
module.exports = {mode: "development", //打包为开发模式// 入口配置的对象中，属性为输出的js文件名，属性值为入口文件entry: {app1:"./app1.js",app2:"./app2.js",app3:"./app3.js",}, //入口文件,从项目根目录指定output: { //输出路径和文件名，使用path模块resolve方法将输出路径解析为绝对路径path: path.resolve(__dirname, "./dist/js"), //将js文件打包到dist/js的目录filename: "[name].js" //使用[name]打包出来的js文件会分别按照入口文件配置的属性来命名}
}

2.2 直接运行命令

webpack --config webpack.config.js

或者把命令封装到package.json文件里

{"name": "js","version": "1.0.0","description": "","main": "app1.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build":"webpack --config webpack.config.js"//命令的添加},"author": "","license": "ISC"
}

最后直接运行

npm run build

使用webpack打包单个js文件相关推荐

webpack打包处理js文件中的高级语法
前言在js文件中定义一个User类 import $ from 'jquery' import './css/at.css' import './css/at.less' import './css ...
配置 postCSS 自动添加 css 的兼容前缀||打包样式表中的图片和字体文件||打包处理 js 文件中的高级语法
配置 postCSS 自动添加 css 的兼容前缀 ① 运行 npm i postcss-loader autoprefixer -D 命令 ② 在项目根目录中创建 postcss 的配置文件 pos ...
webpack打包后引用cdn的js_利用CDN加速react webpack打包后的文件详解
此文不介绍webpack基本配置,如果对基本配置有疑问请查阅官方文档. 1.配置webpack.config.js 将output.publicPath改成上传到的cdn地址, 例(对应上面上传配置) ...
html文件很大,webpack打包之后的文件过大如何解决
本文主要和大家介绍了webpack打包之后的文件过大的解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. 以前一直使用 create-react- ...
webpack打包后的文件夹是空的_深入理解 Webpack 打包分块（下）
前言随着前端代码需要处理的业务越来越繁重,我们不得不面临的一个问题是前端的代码体积也变得越来越庞大.这造成无论是在调式还是在上线时都需要花长时间等待编译完成,并且用户也不得不花额外的时间和带宽下载更 ...
Webpack打包图片-JS-Vue文件
打包图片等静态资源资源模块 | webpack 中文文档 (docschina.org) 1.加载图片案例准备为了演示我们项目中可以加载图片,我们需要在项目中使用图片,比较常见的使用图片的方式是两 ...
使用visual studio code调试单个js文件
使用visual studio code调试单个js文件 1.添加配置 2.选择Node.js Launch Program生成基本配置 3.修改配置信息 4. 运行js文件进行debug调试 5. ...
uni-app 项目引入第三方js插件，单个js文件引入成功，调用该插件方法
通过"vue项目引入第三方js插件,单个js文件引入成功,使用该插件方法时报错(问题已解决)"成功移到UNI-APP上方法一: 引用网址:https://www.cnblogs. ...
webpack vue router import() 打包后单个js文件名称自定义
webpack 配置输出文件名 output: {path: path.resolve(__dirname, 'public'),filename: '[name].[hash:8].js',chun ...

使用webpack打包单个js文件

一、基础打包

1.1 创建项目目录,使用npm init初始化

1.2 按照 webpack 4以上还需要安装webpack-cli

1.3 直接运行命令

二、配置打包

2.1 添加webpack.config.js文件

2.2 直接运行命令

使用webpack打包单个js文件相关推荐

最新文章

热门文章