Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:1:1)
这个就是兼容性问题
1.安装webpack
npm i [email protected] [email protected] -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 [email protected] -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 [email protected] [email protected] -D
打包处理less文件
npm i [email protected] [email protected] -D
打包处理img文件
npm i [email protected] [email protected] -D
打包处理js文件
pm i [email protected] @babel/[email protected] @babel/[email protected] -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 [email protected] -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)