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 =requir