0
点赞
收藏
分享

微信扫一扫

自动打包编译


推荐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

 

 

 

 

没有热重载   和   有热重载

自动打包编译_bundle

自动打包编译_配置文件_02

只修改了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.

 

怎么判断是物理磁盘下的页面,还是内存中的页面?

物理下的:

自动打包编译_根目录_03

自动打包编译_bundle_04

 

内存中的页面:

自动打包编译_配置文件_05

 

默认访问的是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

需要等待一两分钟,如果失败了可以重新安装。

 

 

 

 

 

举报

相关推荐

0 条评论