webpack(全局安装)
//webpack自身只有打包编译功能+插件可以实现打包,编译,测试等功能.
安装：
cnpm i -g webpack
编写需要编译的文件
//src/1.js代码
import mod from './mod.js';//引入mod模块
consloe.log(mod);
//src/mod.js
export default 12;//输出整体模块是12;
//export 可以输出任意东西;export default class{};export default {a :12;b:5,fun(){xxx}}; export 与 import 可以在MDN查看详细使用文档
//若export使用 export let a = 12;export let b = 5;不使用default,即不是输出模块,接收的JS就需要使用import {a,b as nb} from './mod.js';来接收属性;as为取别名
编写配置文件：
webpack.config.js //若不使用这个文件名,webpack编译时需要使用webpack --config XXX;XXX为任意自定义的文件名
//代码
module.exports ={
entry:'./src/1.js',//需要编译的文件路径,配置文件沿用node规则,此处路径要加./,否则会被当做系统模块去查找
output:{
path:'dest/',//输出的路径,此处建议使用path模块下的绝对路径函数resolve('dest/')
filename: 'bundle.js',//输出的文件名
}
}
//webpack多入口,即多文件编译
module.exports ={
entry:{
index:'./src/a',//编译a文件
b:'./src/b'//编译b文件
},
output:{
path:'dest/',//输出的路径,此处建议使用path模块下的绝对路径函数resolve('dest/')
filename: '[name].bundle.js',//此处的name为entry中的键,会被编译为index.bundle.js与b.bundle.js两个文件
}
}
使用webpack编译文件
控制台输入webpack运行即可;因为全局安装之后即为安装cli,可以使用命令行了;
webpack(本地安装,启用webpack服务器webpack-dev-server)
webpack-dev-server(帮助开发的服务器,可以再服务器环境下测试页面等功能) webpack(功能模块) webpack-cli(命令行模块)
1. 安装 cnpm i webpack-dev-server webpack webpack-cli -D
2. 配置文件\ webpack.config.js
const Webpack = require('webpack');
//代码
module.exports ={
entry:'./src/1.js',//需要编译的文件路径,配置文件沿用node规则,此处路径要加./,否则会被当做系统模块去查找
output:{
path:'dest/',//输出的路径,此处建议使用path模块下的绝对路径函数resolve('dest/')
filename: 'bundle.js',//输出的文件名
},
mode:'development',//测试版,production为正式版
// webpack-dev-server配置
plugins:[
//开启webpack的热加载模块,配合hot:true
new Webpack.HotModuleReplacementPlugin()
]
devServer:{
contentBase:'static',//静态文件建议使用path模块下的绝对路径函数resolve('static/')
port:8089,//运行端口
hot:true,//开启热加载,需要配合webpack的HotModuleReplacementPlugin()函数使用,此时仅能使用js文件的自动刷新,静态文件需要在启动脚本命令中添加--watch
historyApiFallback: true,//用来适应前台路由
}
}
3. 此时需要控制台输入webpack-dev-server --inline --watch来启动服务器,编译后的文件存在内存中(或者是dev-server默认将文件编译在根目录),html文件引用时直接使用编译后的文件名即可(bundle.js),--inline为加载刷新时刷新整个页面,--watch为监听静态页面自动刷新
webpack使用loader(俗称:加载器,装载器)
babel-loader用来编译es6 安装 babel-loader(给webpack提供接口) babel-core(真正的功能代码) babel-preset-env(环境预设)
module.exports ={
entry:{
index:'./src/a',//编译a文件使用loader可以不写后缀名,
b:'./src/b'//编译b文件
},
output:{
path:'dest/',//输出的路径,此处建议使用path模块下的绝对路径函数resolve('dest/')
filename: '[name].bundle.js',//此处的name为entry中的键,会被编译为index.bundle.js与b.bundle.js两个文件
},
module:{//所有使用loader的配置都在module中配置
rules:[
{
test:/\.js$/,//以js结尾的文件
exclude:/node_modules/,//需要排除的js文件，node_modules文件夹下的js文件
use:{
loader:'babel-loader',//使用babel-loader
options:{
presets:['env']//配置使用环境预设
}
}
}
]
}
}
//此处可以完成编译,但是无法使用,坐等后续学习,
css-loader用来编译css\less\sass等 安装 css-loader
//创建css文件,直接在css.js中可以引用该文件 import cs1 from './cs1.css'
//webpack配置文件中，编译css.js文件即可,文件中cs1即为css文件中的代码
// module如下
module:{//所有使用loader的配置都在module中配置
rules:[
{
test:/\.css$/,//以css结尾的文件,如果是less等,需要改成对应的后缀名
use:{
loader:'css-loader',//使用css-loader
options:{
presets:['env']//配置使用环境预设
}
}
}
]
}
扩展
爬虫如果需要传参的时候,根据访问方法get直接在网址后面?传参,post直接使用write('{"xxx":"xxx"}');
全栈开发常用工具
1. 编译类
babel --> ES6编译成ES5
grunt\gulp --> 压缩等功能
2. 打包类
browserify --> 一堆文件打包成单个文件
3. 开发辅助
brower-sync --> 多端同步,移动端在线测试使用
4. 测试类
单元测试 --> 对模块、函数进行测试
集成测试 --> 对项目进行测试
压力测试 --> 测试项目性能、负载能力、与隐藏BUG
webpack + 插件 处理以上全部问题;
npm 命令 -g与-D的使用
-g为全局安装,安装的是命令行,即 webpack-cli
-D为本地安装,安装的是webpack文件包
网友评论