path.resolve([from ...], to)
说明:将参数 to 位置的字符解析到一个绝对路径里。
参数说明
from 源路径
to 将被解析到绝对路径的字符串
__dirname变量获取当前模块文件所在目录的完整绝对路径。
关于webpack的学习:
1.前端资源加载和打包工具
1.安装nodeJS
2.npm i webpack -g
3.npm i webpack-cli -g
2.使用的逻辑:
webpack hello.js -o hello.bundle.js
为什么要是用这个 -o 呢,不是很理解
将hello.js -----> bundle.js
3.实现的逻辑:
index.js 使用script src 引入bundle.js
show.js文件 引入str.js
show.js alert(require(./str.js))
str.js module.export='这是一段字符串'
执行命令:
webpack show.js -o str.js 就可以了
-----------------------------------------------
样式的打包:
需要安装loader的加载器
npm i css-loader style-loader
注释:
css-loader:
遍历css文件 找import
style-loader
在style的标签,里面找数据
引入的方式:
require("!style-loader!css-loader!./style.css")
引入的先后顺序,是不可以修改的
安装和打包的流程:
1.初始化项目:
npm init
-生成package.json文件
2.安装css加载模块:
npm install css-loader style-loader
3.引入css文件
在show.js文件夹里面
require('!style-loader!css-loader!./style.css')
4.重新进行编译
理解:
bundle.js 里面包含各种文本格式的文件集合
show 就是一个入口就文件
里面引入各种css或者js资源
之后,将show.js 的引用集合到bundle里面
-------------------------------------------
配置文件:
专有的文件名:
webpack.config.js
简单的代码:
const path = require('path');
module.exports={
entry:'./src/js/show.js',
output:{
path:path.resolve(__dirname, 'dist'),
filename:'bundle.js'
},
module:{
rules:[
{
test:/\.css$/,
loader:'style-loader!css-loader'
}
]
}
}
修改的位置:
引入的css文件,不需要写加载器了
require('../css/style.css') 直接引入就可以了
注意需要看考官网,官网更新了一波 ---所以
loaders---->routers
最后,执行webpack命令:
每次修改都需要进行打包 --mmp (感觉体验不是很好的)
---------------------------------------------------------
webpack安装第三方库 jQuery的安装
1.npm i jquery --save-dev
2.在中转文件里面 show.js 直接使用就可以了
var $=require('jquery')
$(function () {
$('#dv').html('这是一个jquery的语法').css({
backgroundColor:"yello"
})
})
------------------------------------------------------------
服务端的环境安装:
https://webpack.docschina.org/guides/development/#使用-webpack-dev-server
webpack-dev-serve模块的安装
该模块可以将项目,打包到服务端,进行相关的配置
npm i webpack-dev-server --save-dev
不管使用哪种,命令,都需要安装webpack-cli
cnpm i webpack-cli
1.webpack.config.js 文件里面的相关配置
module.exports={
mode: 'development',
devServer:{//配置此静态文件服务器,可以用来预览打包后项目
contentBase:path.resolve(__dirname,'dist'),//开发服务运行时的文件根目录
host:'localhost',//主机地址
port:9090,//端口号
compress:true//开发服务器是否启动gzip等压缩
},
}
2.使用命令来执行:
webpack-dev-server --mode development
3.或者对这些命令进行封装:
"start": "webpack-dev-server --entry ./src/js/show.js --output-filename ./dist/bundle.js",
"dev": "webpack-dev-server --mode development"
说明:将参数 to 位置的字符解析到一个绝对路径里。
参数说明
from 源路径
to 将被解析到绝对路径的字符串
__dirname变量获取当前模块文件所在目录的完整绝对路径。
关于webpack的学习:
1.前端资源加载和打包工具
1.安装nodeJS
2.npm i webpack -g
3.npm i webpack-cli -g
2.使用的逻辑:
webpack hello.js -o hello.bundle.js
为什么要是用这个 -o 呢,不是很理解
将hello.js -----> bundle.js
3.实现的逻辑:
index.js 使用script src 引入bundle.js
show.js文件 引入str.js
show.js alert(require(./str.js))
str.js module.export='这是一段字符串'
执行命令:
webpack show.js -o str.js 就可以了
-----------------------------------------------
样式的打包:
需要安装loader的加载器
npm i css-loader style-loader
注释:
css-loader:
遍历css文件 找import
style-loader
在style的标签,里面找数据
引入的方式:
require("!style-loader!css-loader!./style.css")
引入的先后顺序,是不可以修改的
安装和打包的流程:
1.初始化项目:
npm init
-生成package.json文件
2.安装css加载模块:
npm install css-loader style-loader
3.引入css文件
在show.js文件夹里面
require('!style-loader!css-loader!./style.css')
4.重新进行编译
理解:
bundle.js 里面包含各种文本格式的文件集合
show 就是一个入口就文件
里面引入各种css或者js资源
之后,将show.js 的引用集合到bundle里面
-------------------------------------------
配置文件:
专有的文件名:
webpack.config.js
简单的代码:
const path = require('path');
module.exports={
entry:'./src/js/show.js',
output:{
path:path.resolve(__dirname, 'dist'),
filename:'bundle.js'
},
module:{
rules:[
{
test:/\.css$/,
loader:'style-loader!css-loader'
}
]
}
}
修改的位置:
引入的css文件,不需要写加载器了
require('../css/style.css') 直接引入就可以了
注意需要看考官网,官网更新了一波 ---所以
loaders---->routers
最后,执行webpack命令:
每次修改都需要进行打包 --mmp (感觉体验不是很好的)
---------------------------------------------------------
webpack安装第三方库 jQuery的安装
1.npm i jquery --save-dev
2.在中转文件里面 show.js 直接使用就可以了
var $=require('jquery')
$(function () {
$('#dv').html('这是一个jquery的语法').css({
backgroundColor:"yello"
})
})
------------------------------------------------------------
服务端的环境安装:
https://webpack.docschina.org/guides/development/#使用-webpack-dev-server
webpack-dev-serve模块的安装
该模块可以将项目,打包到服务端,进行相关的配置
npm i webpack-dev-server --save-dev
不管使用哪种,命令,都需要安装webpack-cli
cnpm i webpack-cli
1.webpack.config.js 文件里面的相关配置
module.exports={
mode: 'development',
devServer:{//配置此静态文件服务器,可以用来预览打包后项目
contentBase:path.resolve(__dirname,'dist'),//开发服务运行时的文件根目录
host:'localhost',//主机地址
port:9090,//端口号
compress:true//开发服务器是否启动gzip等压缩
},
}
2.使用命令来执行:
webpack-dev-server --mode development
3.或者对这些命令进行封装:
"start": "webpack-dev-server --entry ./src/js/show.js --output-filename ./dist/bundle.js",
"dev": "webpack-dev-server --mode development"