npm(node package manager)和webpack模块
npm是运行在node.js环境下的包管理工具,使用npm可以很快速的安装前端文件里需要依赖的那些项目文件,比如js、css文件等。首先需要通过npm命令在根目录创建一个packg.json配置文件,这个文件定义了你的项目所需要的各种模块,以及项目的名称、版本、许可证等元数据、以json格式配置项目所需的运行和开发环境。
安装packg.json配置文件
安装jquery包
安装webpack
webpack的作用有两个
1.可以可以将js、css等文件模块打包,会自动分析你的项目结构,找到这些模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏
览器使用。比如js文件并不能引用其他js文件,除非使用ES6的语法import,这种语法现在很多浏览器并不支持,webpack可以对其转换打包成一个可以被浏览器解析的文件。
2.一个html页面上的link、javascript和img等标签总是会默认发起ajax请求向服务器索要html依赖的各种程序文件和图片、字体图标,这会造成页面加载速度不够理想。使用webpack后,由webpack统一管理这些耗时的每次请求,你不需要在每个html页面上引入那些繁多的程序文件、图片和字体图标,只需要引入同一个文件(装载了js、css等的引用)就可以解决所有引入的问题,这节约了页面加载的耗时。
npm i webpack-cli -g //全局安装表示注册到计算机上,今后其它项目也可以使用,不需要重复安装
//再全局安装webpack
npm i webpack -g
//卸载全局的webpack
npm uninstall -g webpack //可以用@指定版本号 ,如:npm uninstall -g webpack@3
package.json
这个文件里就是你的项目所需要的各种模块,它配置项目的开发环境。.json的文件里不能写注释,不能使用单引号。
"name": "vue",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
},
"keywords": [],
"author": "",
"license": "ISC",
//简称dep,在运行环境下会用到的配置
"dependencies": {
"jquery": "^3.4.1", //运行程序依赖于jquery,所以下载jquery时使用的是npm i jquery -S,S就是保存到运行环境
"webpack-cli": "^3.3.2"
},
//简称dev,在生产环境下要用到的配置
"devDependencies": {
"webpack": "^4.31.0", //webpack等打包工具只是用来打包的时候用 ,运行发生在打包之后,所以打包工具放在生产环境里
"webpack-dev-server": "^3.3.1"
}
}
指令的四种模式
npm i xxxmodule - D 安装到本地目录且注册到package.json的devDependencies(dep)生产环境中
npm i xxxmodule - S 安装到本地目录且注册到package.json的dependencies(dev)运行环境中
npm i xxxmodule -g 安装到计算机中,全局命令行可用,只要没写-g那就是安装到本地
webpack打包指令
webpack .\src\main.js .\dist\bundle.js
新版命令:webpack .\src\main.js -o .\dist\bundle.js
webpack手动打包
在vscode中,创建如下目录和文件
打开终端输入npm指令
1.npm init -y 安装packge.json
2.npm i jquery -S 安装jquery包
3.npm i webpack-cli -g 安装全局的webpack CLI
4.npm i webpack -g 安装全局的webpack
5.接下来在main.js中输入一段测试代码,打开浏览器测试效果
$(function() {
alert("hello");
});
//使用webpack打包main.js
webpack .\src\main.js .\dist\bundle.js,如果你用的最新版本:webpack .\src\main.js -o .\dist\bundle.js
//在index.html中直接引入bundle.js即可
<script src="../dist/bundle.js"></script>
webpack.config.js
如不喜欢每次转换都提供入口和出口文件路径,可以考虑在项目根目录创建一个webpack.config.js文件,将入口和出口路径配置在该文件中。这样,下次打包时只需要输入webpack即可。
module.exports={
//webpack打包的入口文件
entry:path.join(__dirname,"/src/main.js"),
//webpack打包的出口文件
output:{
path:path.join(__dirname,"/dist"),
filename:"bundle.js"
}
}
webpack-dev-server模块(自动打包)
这个是终极绝招,它可以自动监视你对程序的修改且可以将改动即时反应在浏览器上。也即,你不需要手动写转换打包的指令,连webpack指令也不需要写。具体操作如下
1.npm init -y 安装packge.json
2.npm i jquery -S 安装jquery包
3.npm i webpack-cli -g 安装全局的webpack CLI
4.npm i webpack -g 安装全局的webpack
5.npm i webpack-cli -D 安装本地(当前项目)的webpack CLI
6.npm i webpack -D 安装本地(当前项目)的webpack
7. npm i webpack-dev-server -D 安装本地的webpack-dev-server
7.在package.json文件中的scripts属性中添加一条
"name": "vue",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.4.1",
"webpack-cli": "^3.3.2"
},
"devDependencies": {
"webpack": "^4.31.0",
"webpack-dev-server": "^3.3.1"
}
}
8.在当前项目的根目录创建webpack.config.js,添加以下代码
module.exports={
//webpack打包的入口文件
entry:path.join(__dirname,"./src/main.js"),
//webpack打包的出口文件
output:{
path:path.join(__dirname,"./dist"),
filename:"bundle.js"
}
}
9.在index.html中引入还未打包的bundle.js,这个文件经过webpack-dev-server自动处理后会生成到内存中,而不再是dist目录
10.执行npm run dev(终止npm run dev:在命令窗口按ctrl+c),输出以下信息
在浏览器输入http://localhost:8080打开网站点击src目录下的index.html文件查看效果。现在你对项目的js文件改动后,webpack-dev-server会立即作出响应并反映在浏览器上。
托管站点根目录
有两种方式可以托管站点根目录,第一种是通过在package.json的scripts中为dev指定参数来设置托管的根目录,被托管的目录会被当做站点根目录:
第二种方式是通过在webpack.config.js的devServer中指定参数来设置托管的根目录,被托管的目录会被当做站点根目录
module.exports={
//webpack打包的入口文件
entry:path.join(__dirname,"./src/main.js"),
//webpack打包的出口文件
output:{
path:path.join(__dirname,"./dist"),
filename:"bundle.js"
},
devServer:{
open:true,
hot:true,
port:3000,
contentBase:"src" //托管的站点根目录设为src而不再是vue
}
}
引用node_module目录下的程序包
不管你托管的目录是vue(本页面例子中的根目录)还是托管的vue下面的src目录,在引用通过npm指令安装的程序包(jquery、bootstrap等文件)时,jquery、bootstrap本身是在node-module目录,如果你的站点根目录是src,也不用担心无法引入与src同级别的node-module目录下的文件。也即不管托管哪个目录,都是使用以下方式引入node-module目录下的包,都会去node-module去找,不用手动写/node-module/bootstrap……
import "bootstrap/dist/css/bootstrap.css" //node-module目录的文件固定这样引用
css打包
webpack默认值支持js文件的打包,要打包css需要安装专门处理css的loader模块
1.npm i style - loader - D 本地安装style - loader模块
2.npm i css-loader -D 本地安装css-loader模块
3.在webpack.config.js中注册模块
module.exports={
//webpack打包的入口文件
entry:path.join(__dirname,"./src/main.js"),
//webpack打包的出口文件
output:{
path:path.join(__dirname,"./dist"),
filename:"bundle.js"
},
devServer:{
open:true,
hot:true,
port:3000,
contentBase:"src"
},
//配置第三方模块的加载器
module:{
rules:[
{test: /\.css$/,use:['style-loader','css-loader'] } //以css结尾的文件用这俩模块进行处理
}
}
4.在src目录创建css目录,在css目录创建index.css
font-size:150px;
color:red;
font-weight:bold;
}
5.在src目录的main.js文件中添加以下引入css文件的代码
import "./css/index.css" //其中./表示当前目录,不能直接写css/index.css,否则报错
$(function() {
alert("webpack");
});
6.在src目录的index.html中添加如下代码
最后运行npm run dev看效果
处理css文件中的url
background: url('/img/1.PNG') ;
height:200px;
}
webpack不能处理url地址,这些url地址指向了图片、字体等。这需要安装url-loader来处理,而url-loader又依赖于file-loader
1.npm i file-loader -D
2.npm i url-loader -D
3. 注意你的webpack托管的是哪一个目录,现在假设你的图片路径为:vue/src/img/1.png。那么如果你的托管的根目录是你的项目根目录vue,则你在css文件中的url为:/src/img/1.png。如果你把src设为站点根目录,比如你把在webpack.config.js文件中的devServer属性的contentBase设src为托管目录,而你的项目根目录本来是vue,那么你在css文件中设置的url为:img/1.png
在webpack.config.js注册url-loader
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
{ test: /\.(png | jpg | gif | ttf | jpeg)$/, use: 'url-loader' }
]
}
url-loader默认不会把图片生成为base64的编码,但base64编码有利于网络传输,一般情况下应该将小图片转换为base64,大图不适用。可通过配置module的rules来实现自动识别小图并转换
处理字体图标
比如bootstrap中就有很多字体图标,需要设置过滤规则用url-loader进行处理
打包less
与css是一样的设置方式,先在src-css目录创建index.less文件
p{
font-size:50px;
background: "#000";
color:red;
}
}
在main.js引入less
在webpack.config.js注册less-loader
module:{
rules:[
{test: /\.css$/,use:['style-loader','css-loader'] },
{test: /\.less$/,use:['style-loader','css-loader','less-loader']} //以less结尾的文件用这两模块进行处理
]
}
npm i less -D 本地安装less,less-loader模块依赖于less模块
npm i less-loader -D 本地安装less-loader模块
打包sass
同上,loader需要:node-sass、sass-loader
module:{
rules:[
{test: /\.less$/,use:['style-loader','css-loader','sass-loader']}
]
}
打包js文件
webpack只支持一些不算太高级的ES6语法,要完整支持ES6高级语法,需要安装babel-loader,有babel-loader是一个js高级语法编译器,它处理之后会自动交给webpack打包到bundle.js
1.npm i babel-core babel-loader@7.1.5 babel-plugin-transform-runtime -D
2.npm i babel-preset-env babel-preset-stage-0 -D
注:babel-loader必须是7.1.5,其它版本装了报错。
在webpack.config.js注册babel-loader
rules: [
{ test: /\.js$/, use: 'babel-loader',exclude:/node_modules/ } //exclude设置被babel-loader编译所排除的目录,如果这个目录被转换,耗时很长而且不能成功运行
]
}
在项目根目录(与package.json同级)创建一个.babelrc的json文件(注:文件名起始处带.号,不带json后缀名)用于注册babel-loader所使用的插件和语法
"presets":["env","stage-0"],
"plugins":["transform-runtime"]
}
在main.js中写测试代码
static personCount=100;
}
alert(Person.personCount);
清空终端的屏幕信息
*
处理工具xxx-loder在webpack1.0版本不需要后缀loader
如果npm很难下载模块安装包,可以考虑使用淘宝的镜像,所有命令的npm改为cnpm即可