webpack打包、js处理兼容性、代码压缩问题Uncaught SyntaxError: Cannot use import statement outside a module (at index

Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:1:1)

这个就是兼容性问题

1.安装webpack

npm i webpack@5.42.1 webpack-cli@4.7.2 -D

2.src统计目录下创建webpack.config.js

module.exports={mode:'development'//开发模式development---生产模式production，production会压缩代码
}

3.在package.json的scripts节点下，新增dev脚本（如果没有package.json文件夹，npm init -y）

"scripts": {"dev":"webpack"},

4.打包（npm run dev）

打完包会出来一个dist文件，引入dist>main.js

5.打包路径

const path =require('path')//道路路径
module.exports={mode:'development',//开发模式development---生产模式production，production会压缩代码//entry指定处理的文件entry:path.join(__dirname,'src/index1.js'),// // output打包的出口output:{path:path.join(__dirname,'./dist2'),//输出得到文件存放路径filename:'bundle.js'//设置输出的文件名}}

6.自动保存 Ctrl+S 安装插件

npm install webpack-dev-server ---save-dev

在webpage.json给webpack加个serve参数

 "scripts": {"dev":"webpack serve"},

const path =require('path')//道路路径
module.exports={mode:'development',//开发模式development---生产模式production，production会压缩代码//entry指定处理的文件entry:path.join(__dirname,'src/index.js'),// // output打包的出口output:{path:path.join(__dirname,'dist'),//输出得到文件存放路径filename:'bundle.js'//设置输出的文件名},devServer:{contentBase:path.join(__dirname,'./'),//指定发布后的映射路径compress:true,//压缩资源// port:9000,//指定服务器的端口号// open:'Chrome'//指定浏览器}}

7.复制html

npm i html-webpack-plugin@5.3.2 -D

const path =require('path')//道路路径
const HtmlPlugin =require('html-webpack-plugin')//1.导入html插件
const htmlPlugin =new HtmlPlugin({//2.创建HTML的实例对象template:'./src/index.html',//指定原文件的存放路径filename:'./index.html'//指定生成文件的存放路径
})
module.exports={mode:'development',//开发模式development---生产模式production，production会压缩代码//插件的数组plugins:[htmlPlugin],//3.通过plugin节点使htmlPlugin插件生效//entry指定处理的文件entry:path.join(__dirname,'src/index.js'),// // output打包的出口output:{path:path.join(__dirname,'dist'),//输出得到文件存放路径filename:'bundle.js'//设置输出的文件名},devServer:{contentBase:path.join(__dirname,'./'),//指定发布后的映射路径compress:true,//压缩资源// port:9000,//指定服务器的端口号// open:'Chrome'//初次打包自动打开指定浏览器}}

8.打包处理css文件

npm i style-loader@3.0.0 css-loader@5.2.6 -D

打包处理less文件

npm i less-loader@10.0.1 less@4.1.1 -D

打包处理img文件

npm i url-loader@4.1.1 file-loader@6.2.0 -D

打包处理js文件

pm i babel-load@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

根目录创建babel.config.js

module.exports={plugins:[['@babel/plugin-proposal-decorators',{legacy:true}]]
}

const path =require('path')//道路路径
const HtmlPlugin =require('html-webpack-plugin')//1.导入html插件
const htmlPlugin =new HtmlPlugin({//2.创建HTML的实例对象template:'./src/index.html',//指定原文件的存放路径filename:'./index.html'//指定生成文件的存放路径
})
module.exports={mode:'development',//开发模式development---生产模式production，production会压缩代码//插件的数组plugins:[htmlPlugin],//3.通过plugin节点使htmlPlugin插件生效//entry指定处理的文件entry:path.join(__dirname,'src/index.js'),// // output打包的出口output:{path:path.join(__dirname,'dist'),//输出得到文件存放路径filename:'bundle.js'//设置输出的文件名},devServer:{contentBase:path.join(__dirname,'./'),//指定发布后的映射路径compress:true,//压缩资源// port:9000,//指定服务器的端口号// host:'127.0.0.1'//指定运行地址// open:'Chrome'//初次打包自动打开指定浏览器},module:{//所有第三方文件模块的匹配规则rules:[//文件名匹配规则{test:'/\.css$/',use:['style-loader','css-loader']},{test:'/\.less$/',use:['style-loader','css-loader','less-loader']},{test:'/\.jpg|png|gif$/',use:'url-loader?limit=22229'},{test:'/\.js$/',use:'babel-loader',exclude:/node_modules/},]}}

9.自动删除更新dist

npm i clean-webpack-plugi@3.0.0 -D

const path =require('path')//道路路径
const HtmlPlugin =require('html-webpack-plugin')//1.导入html插件
const {CleanWebpackPlugin} =require('clean-webpack-plugin')
const cleanPlugin =new CleanWebpackPlugin()
const htmlPlugin =new HtmlPlugin({//2.创建HTML的实例对象template:'./src/index.html',//指定原文件的存放路径filename:'./index.html'//指定生成文件的存放路径
})
module.exports={mode:'development',//开发模式development---生产模式production，production会压缩代码//插件的数组plugins:[htmlPlugin,cleanPlugin],//3.通过plugin节点使htmlPlugin插件生效//entry指定处理的文件entry:path.join(__dirname,'src/index.js'),// // output打包的出口output:{path:path.join(__dirname,'dist'),//输出得到文件存放路径filename:'js/bundle.js'//设置输出的文件名},devServer:{contentBase:path.join(__dirname,'./'),//指定发布后的映射路径compress:true,//压缩资源// port:9000,//指定服务器的端口号// host:'127.0.0.1'//指定运行地址// open:'Chrome'//初次打包自动打开指定浏览器},module:{//所有第三方文件模块的匹配规则rules:[//文件名匹配规则{test:'/\.css$/',use:['style-loader','css-loader']},{test:'/\.less$/',use:['style-loader','css-loader','less-loader']},//outputPath=images{test:'/\.jpg|png|gif$/',use:'url-loader?limit=470&outputPath=images'},{test:'/\.js$/',use:'babel-loader',exclude:/node_modules/},]}}

10.报错具体行数

module.exports={mode:'development',//开发模式development---生产模式production，production会压缩代码devtool:'eval-source-map',//报错具体行数和具体位置（开发）// devtool:'nosources-source-map',//报错具体行数（开发）
}

11.webpack打包中的@

resolve:{alias:{//告诉webpack,程序员写的代码中@代表src这层目录"@":path.join(__dirname,'./src')}}

import logo from './img/mi.png'

console.log(logo);

$('.box').attr('src',logo)

webpack打包、js处理兼容性、代码压缩问题Uncaught SyntaxError: Cannot use import statement outside a module (at index相关推荐

webpack打包js/css/scss/less/styl等（可以打包图片）
Webpack 1. 什么是webpack? 打包,压缩各种静态资源的工具(css,js,图片,图标等) 2.目的性能优化减少浏览器向服务端请求的次数节约服务器的的带宽资源 3.如何使用介绍 ...
webpack打包js文件的问题
前言这里记录下webpack打包js文件的配置和遇到的问题.因环境版本等不同,解决办法未必都是通用的,仅作为大家参考之用: 我的环境配置 macOS M1 系统 webpack版本:(全局版本)we ...
webpack打包js文件
Webpack安装全局安装 npm install -g webpack webpack-cli 安装后查看版本号 webpack -v 初始化项目创建webpack文件夹进入webpack目录 ...
webpack --- 发布环境的配置代码压缩代码分类
说明源代码本篇主要对发布环境的配置说明前面2点是对webpack的一个复习. 第3点开始,逐步配置部署代码 1. Webpack发布的策略 2.1 在实际开发中,一般会有两套方案: 开发期间的项 ...
node项目打包如何隐藏html后缀,详解webpack打包nodejs项目(前端代码)
随着前端体积越来越大,功能越来越丰富,这时候就需要将前端工程化,而webpack就是用于将前端各种文件打包起来.一个简单的webpack应该包含以下几个概念入口起点配置组件加载器模块模块热 ...
webpack的安装及使用webpack打包js、css文件
目录 webpack介绍前端模块化和打包概念介绍 webpack和grunt/gulp的对比 webpack和nodejs的关系 webpack安装 webpack使用示例环境搭建使用webpa ...
webpack打包js内存溢出:CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
使用webpack打包react项目,内存溢出: <--- JS stacktrace --->==== JS stack trace ========================== ...
【WebPack】WebPack的安装、使用WebPack打包 js/css/img 等文件
目录 webpack和node和npm的关系 npm install webpack -g -g是全局的意思项目中一般有两个文件夹: src,dist(distribution) WebPack的使 ...
webpack打包js文件，图片路径错误，没有将图片打包的问题
初用 webpack 进行项目开发的同学会发现:在 js 或者 vue 中引用的图片都没有打包进 bundle 文件夹中.这时是需要require的方式进行图片路径的引用,这样引用的图片就可以成功打包 ...
Webpack5:用webpack打包js文件
前提:node.js和npm已安装好 node.js和npm的安装网上教程一大堆,就不说了,建议初学者将node.js和npm装在c盘,能避免很多操作和麻烦(特指windows用户,有点想买mac了, ...

webpack打包、js处理兼容性、代码压缩问题Uncaught SyntaxError: Cannot use import statement outside a module (at index

webpack打包、js处理兼容性、代码压缩问题Uncaught SyntaxError: Cannot use import statement outside a module (at index相关推荐

最新文章

热门文章