在我们 npm init -y (初始化),npm i juquery -S 安装jquery库(这一步可有可无,我是用到了这个库)
当我们webpack ./src/main.js ./dist/bundle.js 的时候出现以下黄色字体的话呢。别急!!看下面。
WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode
--------------------------------------------------------------------------------分界线-----------------------------------------------------------------------------------我们会在文件目录下面会写这样的一个文件 webpack.config.js。这个的作用就是当我们每次保存代码的时候自动编译,自动在浏览器显示出来。这个文件目录我还是贴出来给你们看看,免得前面遇到问题不一样,就无法对症下药了。
重点来了。重点来了。重点来了。重点来了。重点来了。重点来了。重点来了。webpack.config.js这个文件配置一个下面代码就可以解决问题。
module.exports = {
mode: 'production'
};
我把我webpack.config.js文件的的代码放上来给你们参考一下。
--------------------------------------------------------------------------------分界线--------------------------------------------------------------------------
const path = require('path')
module.exports = {
mode: 'production',//设置为生产模式
entry: path.join(__dirname,'./src/main.js'),//入口
output:{//出口
path:path.join(__dirname,'./dist'),
filename:'bundle.js' //这是指定文件的路径,输出文件的名称
}
}
npm i webpack-dev-server -D(安装这个工具到本地开发,带有依赖性的)记得在package.json文件配置"dev": "webpack-dev-server",(这个位置是在script{}包裹起来的,大概是6--9行。)
npm i webpack -D(这个也是带依赖性的,先装了再说,)
最后npm run dev。。
注意要进入服务器才可以有我们设置的效果,长这样-->Project is running at http://localhost:8080/--->
会显示----------------ℹ 「wdm」: Compiled successfully.-----------------------
总结:就是先要熟悉一下npm-->webpack-->webpack-dev-server。这个过程就是敲一下命令、补一些就可以配置就可以配置成功。
做最好的自己,最近在学vue,大家一起加油,非科班,共勉。