npm install npm -g
npm -v 测试是否成功安装
3.使用淘宝镜像(cnpm命令)
npm install -g cnpm --registry=https://registry.npm.taobao.org
4.安装模块
npm install <Module Name>
安装好之后,模块包就放在了工程目录下的node_modules目录中,因此在代码中只需要通过
require('express')的方式就可引入,无需指定第三方包路径。
var express = require('Module Name');
5.全局安装与本地安装
npm install express # 本地安装
npm install express -g # 全局安装
本地安装将安装包放在./node_modules下(运行npm命令时所在的目录),
可以通过require()来引入本地安装的包。
全局安装将安装包放在/usr/local下或者你node的安装目录,
可以直接在命令行里使用。
6.Package.json主要属性说明
name-包名。
version-包的版本号。
description-包的描述。
homepage-包的官网url。
author-包的作者姓名。
contributors-包的其他贡献者姓名。
dependencies-依赖包列表。如果依赖包没有安装,npm会自动将依赖包安装在node_module目录下。
repository-包代码存放的地方的类型,可以是git或svn,git可在Github上。
main-main字段指定了程序的主入口文件,require('moduleName')就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。
keywords-关键字.
scripts-脚本命令
7.常用命令
查看安装信息 npm list -g
查看具体某个模块 npm list moduleName
卸载模块 npm uninstall moduleName
更新模块 npm update moduleName
搜索模块 npm search moduleName
创建模块 npm init/npm init -y(跳过描述)
发布模块 npm publish
帮助命令 npm help
npm cache clear 可以清空NPM本地缓存
npm install webpack -g
npm install webpack-cli -g
webpack -v
4.安装依赖模块npm i jquery
npm un jquery
npm i jquery --save-dev (生产模式 不压缩优化)
npm i jquery --save (生产模式 压缩优化)
如果不加--save和-save-dev参数,模块依赖不会加入到package.jsonwebpack-work
dist-输出文件夹
node_modules-依赖模块文件夹
src-源码文件夹
index.js-入口文件
package.json
6.初始化npm init
npm init -y 跳过描述
npm init 并且在当前目录下配置package.json文件,根据package.json初始化。
7.快速打包webpack src\index.js --output dist\
8.webpack.config.js内容module.exports={
entry:{} //入口配置-必须
output:{} //出口配置-必须
module:{} //module.rules loaders
plugins:{} //插件
devServer:{} //开发服务器
}
样例:const path = require('path');
module.exports={
entry:{
a:'./src/index.js' //a是key值,自定义即可。
},
output:{
//path:__dirname+'/dist',//必须为绝对路径 __dirname是node内置函数,指当前绝对路径
path:path.resolve(__dirname,'dist'),
filename:'[name].bundle.js'
}
}
9.默认使用webpack.config.js配置文件webpack --mode development 开发模式 不压缩
webpack --mode production 生产模式 压缩
new HtmlWebpackPlugin({
filename:'index.html',
chunks:['a'], //包含的js
minify:{
collapseWhitespace:true, //压缩空白
removeAttributeQuotes:true //删除属性双引号
},
hash:true, //生成js链接随机数,防止缓存
title:'wdwtest',
template:'./src/index.html' //模板,可省略
})
2.clean-webpack-plugindevServer:{
contentBase:path.resolve(__dirname,'dist'), //设置服务器访问的基本目录
host:'localhost', //服务器IP
port:'8090',
open:true, //自动打开浏览器
hot:true //打开热部署
}
启动:webpack-dev-server --mode development"scripts": {
"dev": "webpack-dev-server --mode development"
},
4.压缩cnpm i uglifyjs-webpack-plugin -D
const uglify= require('uglifyjs-webpack-plugin');
new uglify();
使用devtool:'source-map'开启调试plugins:[
new CopyWebpackPlugin([{
from:path.resolve(__dirname,'src/assets'),
to:'./public'
}])
]
6.图片插件{
test:/\.(png|jpg|gif)$/,
use:[{
loader:'url-loader',
options:{
limit:5000 //小于该大小的图片会转换成base64.
}
}]
}
7.分离css插件cnpm i extract-text-webpack-plugin@next -D
使用:const ExtractTextPlugin=require('extract-text-webpack-plugin');
new ExtractTextPlugin(要提取出去的路径)
{ test:/\.css$/,
use:ExtractTextPlugin.extract({
fallback:'style-loader',
use:'css-loader',
publicPath:'../' //解决css背景图路径问题
})
}
8.消除冗余csscnpm i purifycss-webpack purify-css glob -D
使用:const PurifyCssWebpack = require('purifycss-webpack');
const glob = require('glob');
new PurifyCssWebpack({
paths:glob.sync(path.join(__dirname,'src/*.html'))
})
1.loader起到加载器、转化器的作用,类似插件。
2.css处理
webpack默认只能处理js,需要相应的loader插件进行css处理。
style-loader、css-loader。
下载:
cnpm i style-loader css-loader -D
使用:
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
//或 loader:['style-loader','css-loader']
//或
//use:[
// {loader:'style-loader'},
// {loader:'css-loader'}
// ]
}
]
}
cnpm i babel-loader babel-core babel-preset-env -D
使用:{
test:/\.(js|jsx)$/,
use:[{
loader:'babel-loader',
options:{
preset:'env'
}
}],
exclude:/node_modules/
}
function show(){
return '我是新模块'
}
module.exports=show;
引入模块require('./show');
2.webpack3以后支持直接引入jsonconst jsonConfig = require('./config.json');
3.使用第三方库import $ from 'jquery'
2)ProvidePluginconst webpack=require('webpack');
new webpack.ProvidePlugin({
$:'jquery',
xxx:'xxxx'
})
3)import $...,引入之后,无论代码中是否使用到了jquery,打包都会打进去,产生冗余js。optimization:{
splitChunks:{
cacheGroups:{
aaa:{
//chunks:'initial',
test: path.resolve(__dirname, 'src/js/jquery.min.js'),
name:'jquery',
chunks: "all",
//minSize: 1,
priority: 0
}
}
}
}
当人们尝试学习 JavaScript , 或者其他编程技术的时候,有些概念容易混淆,特别是当你学习过其他语言的时候。很难找到学习的时间(有时候是动力)。一旦当你理解了一些东西的时候,却很容易再一次忘记。
读万卷书,不如行万里路,行万里路不如跟随成功人的脚步。其实我们在小公司就如行万里路,我们只有多做多学在可以迈出去。在大公司就我们就要跟随成功人的脚步,就是你们公司的架构师和高级开发,去了解他们。
package.json就是管理你本地安装的npm包,用于定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。一个package.json文件可以做如下事情?
才3个方法?如果你希望的是提升效率的10大方法,程序员必看的20个学习法......很抱歉,本文不适合你。在精而不在多,一个人若能够学会,并且长期践行这其中一种方法,便已经能够走在很多人前头了。
前端开发作为一个由网页制作演变成的新兴岗位,其实在国内外来说,受到重视的时间并不长,在前几年间技术快速的发展和其应用普及率的迅猛增长,使得前端人才市场一片盛况空前的景象,由于其的易入门性和不错的发展前景,吸引了众多前端爱好者和转行人员的青睐。
技术的发展是瞬息万变的事情,web前端领域也不例外。可以说每一年在前端领域都会有一些新技术涌现和技术变革,2019年前端发展又会有哪些布局?我大致总结了8个方向,下面就同大家一起盘点一下。
这个标题有点大,起这个标题的时候我自己都有点害怕,事情是这样的,前两天在知乎上写了一个回答叫20多岁的人做什么,将来不会后悔?我正好也是20多岁,就回答了这个问题
CSS(Cascading Style Sheet,层叠样式表)是由W3C(万维网联盟)的CSS工作组创建和维护的。它是一种不需要编译,可直接由浏览器执行的标记性语言,用于控制Web页面的外观
相信每位开发者在自己开发的过程中,都会反思一些问题,比如怎样提高编程能力、如何保持心态不砍产品经理、996 之后怎样恢复精力……作为开发者,你工作了几年?在工作过程中学习到了什么呢?
首先无论你要学习任何技能,必须有一个清晰的版图,什么是清晰的版图呢?首先了解你学的技术将来要从事什么工作,这个工作的条件是哪些?然后你要有一个非常清晰的学习大纲
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!