在html项目中使用webpack编译es6语法

前言：在html项目中遇到了使用import导入npm安装的依赖包，结果就是在浏览器中报错。然后开始了各种的解决方式，最后通过webpack对代码进行编译打包，然后再引入到html页面，从而解决代码报错。

写法一：

步骤：（不写webpack.config.js文件）

第一步：如果项目中没有package.json文件，需要先初始化包管理器 npm i -y

第二步：安转webpack npm webpack webpack-cli -D

第三步：打包文件 npx webpack ./src/main.js --mode=production 【其中./src/mian.js是要被打包的文件路径，--mode=production是打包模式为生产模式】

第四步：在html页面引入打包生成的文件 ./dist.mian.js (这是我项目中打包生成文件的路径)

写法二：

步骤：（新建webpack.config.js文件）

第一二步：同写法一的1、2步。

第三步：创建webpack.config.js文件

const path = require("path")
module.exports={entry:'./src/main.js', //相对路径output:{path:path.resolve(__dirname,"dist"),//绝对路径filename:'main.js'},mode:'production'
}

第四步：在终端 npx webpack 进行打包

第五步：在页面中引入

在html项目中使用webpack编译es6语法相关推荐

vue 2.0 无法编译ES6语法
# vue2.0 webpack 无法编译 ES6 语法之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码,包括ES6语法也能正常转为ES5语法,但是当 ...
gulp中使用babel-polyfill编译es6拓展语法
今天想在新项目中使用es6的generators,发现虽然gulp已经有了babel编译,但仍会报错,网上查找后发现解决办法是加载polyfill,但是找到的办法都不试用我的项目. 解决办法:在ind ...
Vue不能编译ES6语法的解决方案
场景:在公司的私有npm服务器上install了一个包,包名叫做qd-spm2,这个包是公司同事用es6语法编写的. 步骤: 首先npm install --save qd-spm2 然后在main. ...
webpack转化es6语法
1.安装babel babel转换高语法到es5 babel-loader转换 @babel/core是核心模块 @babel/preset-env 高级语法转换成低级语法 yarn add bab ...
vue项目中运用webpack动态配置打包多种环境域名
在如今前后端分离,各种框架盛行的前端界,对项目的打包要求也越来越复杂,本人分享一个vue项目里,根据命令行输入不同的命令,打包出不同环境域名的方法.(欢迎纠错,谢谢.) 1. 安装插件 cross-e ...
vue项目中使用 webpack优化之HappyPack 实战
由于运行在 Node.js 之上的 Webpack 是单线程模型的,所以Webpack 需要处理的事情需要一件一件的做,不能多件事一起做. 我们需要Webpack 能同一时间处理多个任务,发挥多核 C ...
前端实际开发中常见坑（vue项目中各种运行编译报错）
1.当拉取一个项目下来,npm install报错. 可能原因:npm install的路径不对,切记要检查好是在拉取的项目下安装依赖,而不是在自己新建的项目下(也就是真正仓库项目的上级)进行操作. ...
工作中常用到的ES6语法
一.let和const 在JavaScript中咱们以前主要用关键var来定义变量,ES6之后,新增了定义变量的两个关键字,分别是let和const. 对于变量来说,在ES5中var定义的变量会提升到 ...
vue项目中使用@babel/plugin-proposal-optional-chaining的?.语法，防止字段没有报错
第一步:下载@babel/plugin-proposal-optional-chaining npm install --save-dev @babel/plugin-proposal-optiona ...

在html项目中使用webpack编译es6语法

在html项目中使用webpack编译es6语法相关推荐

最新文章

热门文章