推荐vscode插件:beautiful UI,特别好用,良心推荐。不然你写js代码全是白色,只有var是蓝色.
node nodemon
webpack . webpack-dev-server
如果你的各种包有问题,报错缺少什么包,最简单的方法就是全部删除node_models,终端cnpm i就行了。
webpack.config.js中只要带s的属性,都是数组,比较方便记忆
wanggonegedeAir:webpack-study wanggonggege$ npm run dev
> webpack-study@1.0.0 dev /Users/wanggonggege/Desktop/webpack-study
> webpack-dev-server
ℹ 「wds」: Project is running at http://localhost:8081/
ℹ 「wds」: webpack output is served from / 打包的输出文件正被托管在跟路径
注意,上面这一行
//webpack-dev-server帮我们打包生成的bundle.js文件,并没有存放到实际的物理磁盘上;
//而是,直接托管到了电脑内存中,所以我们在项目根目录中,根本找不到,打包好的bundle.js
ℹ 「wdm」: Hash: 7d9650c98a482561423f
Version: webpack 4.29.6
Time: 643ms
Built at: 2019-04-08 12:33:56
Asset Size Chunks Chunk Names
bundle.js 652 KiB main [emitted] main
Entrypoint main = bundle.js
没有热重载 和 有热重载
只修改了main.js中的颜色,你会发现:热重载其实值更新你改变并且保存过的文件,未修改的文件不会发生变化。只是把颜色相关的代码相当于做了一个补丁放到了页面上。
好处:减少了不必要的更新。还可以实现浏览器的无刷新重载。
在样式修改上更明显,页面没有被刷新,但是新样式已经覆盖了旧样式。能减少一些不必要的刷新请求。
热重载我整的没有报错:webpack4.0
//webpack.config.js
const path = require('path');
//这个配置文件其实就是一个js文件,通过node中的模块操作,向外暴露了一个配置对象
module.exports = {
//大家已经学会了举一反4:在配置文件中,需要手动指定 入口和出口
entry: path.join(__dirname, "./src/main.js"), //入口,表示,要使用webpack打包哪个文件
output: {
//输出文件相关的配置
path: path.join(__dirname, "./dist"), //指定打包好的文件,输出到哪个目录中去
filename: "bundle.js" //这是指定 输出的文件的名称
},
devServer: {
//这是配置 dev-server 命令参数的第二种形式,相对来说这种方式麻烦一些
//webpack-dev-server --open --port 3000 --contentBase src --hot
open:true,//自动打开浏览器
port:3000,//设置启动时候的运行端口
contentBase:'src',//指定托管的根目录
hot:true,//启用热更新
}
};
//当我们在控制台,直接输入webpack命令执行的时候,webpack做了如下几步:
//1.首先,webpack发现,我们没有通过命令的形式,给他指定入口和出口
//2.webpack就会去项目的根目录中,查找一个叫'webpack.config.js'的配置文件
//3.当找到配置文件后,webpack会去解析执行这个配置文件.当解析执行完配置文件后,就得到了配置文件中导出的配置对象
//4.当webpack拿到配置对象后,就拿到了配置对象中,指定的入口和出口,然后进行打包构建.
//使用webpack-dev-server这个工具,实现自动打包编译功能
//1.运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
//2.安装完毕后,这个工具的用法,和webpack命令的用法,完全一样
//3.由于我们是在项目中,本地安装的webpack-dev-server,所以无法把它当作脚本命令,在终端中直接运行,
//(只有那些 安装到全局 -g 的工具才能在终端中正常执行)
//4.注意:webpack-dev-server这个工具,如果想要正常运行,要求在本地项目中必须安装webpack
//5.webpack-dev-server帮我们打包生成的bundle.js文件,并没有存放到实际的物理磁盘上;
//而是,直接托管到了电脑内存中,所以我们在项目根目录中,根本找不到,打包好的bundle.js
//6.我们可以认为,webpack-dev-server把打包好的文件,以一种虚拟的形式,托管到了咱们项目的根目录中,
//虽然我们看不到他,但是,可以认为,和dist src node_modules平级,有一个看不见的文件叫bundle.js
//7.
如果你的报错了,请按照下面的来处理
const path = require('path');
//如果热重载出问题,需要引入下面模块进行配置
//启用热更新的第二步
const webpack = require('webpack');
//这个配置文件其实就是一个js文件,通过node中的模块操作,向外暴露了一个配置对象
module.exports = {
//大家已经学会了举一反4:在配置文件中,需要手动指定 入口和出口
entry: path.join(__dirname, "./src/main.js"), //入口,表示,要使用webpack打包哪个文件
output: {
//输出文件相关的配置
path: path.join(__dirname, "./dist"), //指定打包好的文件,输出到哪个目录中去
filename: "bundle.js" //这是指定 输出的文件的名称
},
devServer: {
//这是配置 dev-server 命令参数的第二种形式,相对来说这种方式麻烦一些
//webpack-dev-server --open --port 3000 --contentBase src --hot
open:true,//自动打开浏览器
port:3000,//设置启动时候的运行端口
contentBase:'src',//指定托管的根目录
hot:true,//启用热更新
},
plugins:[//配置插件的节点
new webpack.HotModuleReplacementPlugin() //new一个热更新的模块对象,这是启用热更新的第三步
]
};
//当我们在控制台,直接输入webpack命令执行的时候,webpack做了如下几步:
//1.首先,webpack发现,我们没有通过命令的形式,给他指定入口和出口
//2.webpack就会去项目的根目录中,查找一个叫'webpack.config.js'的配置文件
//3.当找到配置文件后,webpack会去解析执行这个配置文件.当解析执行完配置文件后,就得到了配置文件中导出的配置对象
//4.当webpack拿到配置对象后,就拿到了配置对象中,指定的入口和出口,然后进行打包构建.
//使用webpack-dev-server这个工具,实现自动打包编译功能
//1.运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
//2.安装完毕后,这个工具的用法,和webpack命令的用法,完全一样
//3.由于我们是在项目中,本地安装的webpack-dev-server,所以无法把它当作脚本命令,在终端中直接运行,
//(只有那些 安装到全局 -g 的工具才能在终端中正常执行)
//4.注意:webpack-dev-server这个工具,如果想要正常运行,要求在本地项目中必须安装webpack
//5.webpack-dev-server帮我们打包生成的bundle.js文件,并没有存放到实际的物理磁盘上;
//而是,直接托管到了电脑内存中,所以我们在项目根目录中,根本找不到,打包好的bundle.js
//6.我们可以认为,webpack-dev-server把打包好的文件,以一种虚拟的形式,托管到了咱们项目的根目录中,
//虽然我们看不到他,但是,可以认为,和dist src node_modules平级,有一个看不见的文件叫bundle.js
//7.
怎么判断是物理磁盘下的页面,还是内存中的页面?
物理下的:
内存中的页面:
默认访问的是index.html,所以在测试内存的页面的时候,改为index.html,而不是index123.html
配置处理.css文件的第三方loader规则(从右到左进行调用)
在运行sass时候,如果报错如下:
ERROR in ./src/css/index.scss (./node_modules/_css-loader@2.1.1@css-loader/dist/cjs.js!./node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js!./src/css/index.scss)
Module build failed (from ./node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js):
Error: ENOENT: no such file or directory, scandir '/Users/wanggonggege/Desktop/webpack-study/node_modules/_node-sass@4.11.0@node-sass/vendor'
at Object.readdirSync (fs.js:783:3)
at Object.getInstalledBinaries (/Users/wanggonggege/Desktop/webpack-study/node_modules/_node-sass@4.11.0@node-sass/lib/extensions.js:130:13)
at foundBinariesList (/Users/wanggonggege/Desktop/webpack-study/node_modules/_node-sass@4.11.0@node-sass/lib/errors.js:20:15)
at foundBinaries (/Users/wanggonggege/Desktop/webpack-study/node_modules/_node-sass@4.11.0@node-sass/lib/errors.js:15:5)
at Object.module.exports.missingBinary (/Users/wanggonggege/Desktop/webpack-study/node_modules/_node-sass@4.11.0@node-sass/lib/errors.js:45:5)
at module.exports (/Users/wanggonggege/Desktop/webpack-study/node_modules/_node-sass@4.11.0@node-sass/lib/binding.js:15:30)
at Object.<anonymous> (/Users/wanggonggege/Desktop/webpack-study/node_modules/_node-sass@4.11.0@node-sass/lib/index.js:14:35)
at Module._compile (internal/modules/cjs/loader.js:688:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
@ ./src/css/index.scss 2:14-163 21:1-42:3 22:19-168
@ ./src/main.js
@ multi ./node_modules/_webpack-dev-server@3.2.1@webpack-dev-server/client?http://localhost:3000 (webpack)/hot/dev-server.js ./src/main.js
可以这样子解决:
cnpm rebuild node-sass
需要等待一两分钟,如果失败了可以重新安装。