作者:桑榆
QQ:934440653
有问题,评论留言,或qq联系
第一步 .安装node.js
1.安装淘宝镜像(可选)
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.检查node-v
安装教程:https://jingyan.baidu.com/article/48b37f8dd141b41a646488bc.html
3.检查npm-v
第二步 搭建webpack
官方文档:https://webpack.js.org/configuration
1.初始化项目
npm init(推荐) 或者 npm init -y
配置文件:npm install
2.安装webpack
进入项目文件 局部安装:进入文件夹 npm i -D webpack (推荐)
或 进入项目存储磁盘 全局安装:输入npm install webpack -g
3.webpack4+以上版本
需装:npm install --save-dev webpack-cli
4.打开package.json配置:
通过npm run即可查看以下的配置命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
对应打包命令:
开发模式打包 npm run dev
生产模式 npm run build
全局安装使用命令 webpack 打包
5.配置webpack.config.js
在根目录下,手动添加一个js文件,命名为webpack.config.js。
1.入口(entry points)
需要打包的文件
- 单入口
module.exports = {
entry : './app/main.js',
}
- 多入口
module.exports = {
entry : {
main: './app/main.js',
test:'./app/test.js',
// main:["./app/main2","./app/main3"] 合并打包,输出在在一个js文件中
},
}
- 输出到不同目录
const path = require("path");
module.exports = {
entry : {
'bb1/main': './app/main.js',
'bb2/test':'./app/test.js'
},
}
output : {
path : path.join(__dirname,'build'),
// path: path.resolve(__dirname, './dist'),
filename : '[name].js',
},
//打包后会在build下生成bb1与bb2两个文件夹,在各自文件夹下生成对应的打包js
2.输出(output)
- 单入口输出
module.exports = {
output : {
path : path.join(__dirname,'build'),
//或者 path:__dirname + '/dist',
filename : 'xx.js'
}
//path :目标输出目录 path 的绝对路径,会在根目录下生成一个'build'的文件 夹,放置打包后的文件。
//filename :用于输出文件的文件名,自定义命名。
}
- 多入口输出
module.exports = {
output : {
path : path.join(__dirname,'build'),
//或者 path:__dirname + '/dist',
filename : '[name].js'
},
//path :目标输出目录 path 的绝对路径
//filename : 用于输出文件的文件名,命名使用对象入口文件的name,打包后会在'build'下,生成对应入口文件数量的输出文件。
}
3.模式( mode)
module.exports = {
mode:'development'
//或者 mode:'production'
}
//mode 配置选项,告知 webpack 使用相应模式的内置优化。
//development 开发模式 production 生产模式
*注:在此步骤之前都为必要步骤
以上配置结束可执行打包命令完成简单的打包需求:
开发模式打包 npm run dev
生产模式 npm run build
全局安装使用命令 webpack 打包
4.loader
可以将文件从不同的语言(如 TypeScript)转换为 JavaScript;除了js以外的文件需要配置loader
在你的应用程序中,有三种使用 loader 的方式:
- 配置](https://www.webpackjs.com/concepts/loaders/#configuration)(推荐):在 webpack.config.js 文件中指定 loader。
- 内联:在每个
import
语句中显式指定 loader。 - CLI:在 shell 命令中指定它们。
推荐配置loder:加载顺序从右向左加载
//打包css需要在入口文件中导入css文件路径,require("../css/index.css");
module.exports = {
module:{
rules:[
{
test: /\.css$/, // 正则匹配所有.css后缀的样式文件
use: ['style-loader', 'css-loader'] // 使用这两个loader来加载样式文件
}
]
}
}
//test:匹配打包文件的后缀
//use : 根据加载不同文件使用不同的loader,一个loader每次只做一次单一的转换
//需要桶过npm 安装对应的loader
1).js的loader
默认webpack只支持JS,不需要安装
cnpm install babel-preset-latest --save-dev
cnpm install babel loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime --save-dev
-
Jquery暴露
npm install --save expose-loader
module:{
rules:[
{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
},{
loader: 'expose-loader',
options: '$'
}]
}
]
},
2).css的loader
- 普通打包,将css代码打包在js中
cnpm install style-loader css-loader --save-dev
module:{
rules:[
{
test: /\.css$/, // 正则匹配所有.css后缀的样式文件
use: ['style-loader', 'css-loader'] // 使用这两个loader来加载样式文件
},
]
},
- 将css从js分离,详见插件部分
3).img的loader
- url引用图片
npm install url-loader --save-dev //小于limit 转为base64
npm install file-loader --save-dev //大于limit 引用路径
module:{
rules:[
{
test: /\.(png|jpg|gif)$/,
loader: 'url-loader',
options:{
limit:10000,
name:'img/[name].[ext]',
publicPath:'../../js/sea'
}
},
// {
// test: /\.(png|jpg|gif)$/,
// loader: 'file-loader',
// options:{
// limit:10000,
// name:'img/[name].[ext]',
// publicPath:'../../js/sea'
// }
// },
]
},
//loader 后面 limit 字段代表图片打包限制,这个限制并不是说超过了就不能打包,而是指当图片大小小于限制时会自动转成 base64 码引用。上例中大于10k的图片正常打包,小于10k的图片以 base64 的方式引用。
// query 是旧版本写法,options 是新版写法。
// publicPath 打包后文件存放地址
- html引用 npm install html-withimg-loader --save-dev
由于 webpack 对 html 的处理不太好,打包 HTML 文件中的图片资源是相对来说最麻烦的。这里需要引用一个插件—— html-withimg-loder
webpack.config.js 添加配置
module: {
loaders: [
{
test: /\.html$/,
loader: 'html-withimg-loader'
}
]
}
4).sass的loader
cnpm install sass-loader node-sass webpack --save-dev
5).模板的loader
cnpm install html-loader --save-dev ( html )
cnpm install ejs-loader --save-dev ( ejs )
6).html
npm install html-webpack-plugin --save-drv
5.插件(plugins)
webpack
插件分为两种,一种是内置插件,另一种是第三方插件,需要npm
安装,require
引用后才可使用。
1)mini-css-extract-plugin
- css代码从js中分离出来
npm install style-loader css-loader --save-dev
npm install --save-dev mini-css-extract-plugin
//引用插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module:{
rules:[
{
test: /\.css$/, // 正则匹配所有.css后缀的样式文件
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: './build' //打包后的css放置位置
}
},
"css-loader"
]
},
]
},
plugins: [
new HtmlWebpackPlugin({title:'测试'}),
new MiniCssExtractPlugin({
filename: "[name].css",
// chunkFilename: "[id].css"
})
],
2)html-webpack-plugin
相关参数用法:https://segmentfault.com/a/1190000007294861
npm i --save-dev html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
module.exports = {
plugins: [
new HtmlWebpackPlugin({
title:'测试',
filename: '../../index-[hash].html', //通过模板生成的文件 以及路径
template: 'neiyi.html', //模板路径 以根index.html为模板生成
inject: 'body', //指定插入js的位置 head或body
}),
]
}
//title:重命名html导航名
// optimization: {
// splitChunks: {
// cacheGroups: {
// commons: {
// name: "jquery",
// // chunks: ['loadCMD','initPageCMD'],
// minChunks: 2,
// filename:'./js/item1201/lvshifu/[name].js'
// }
// }
// }
// },
3)extract-text-webpack-plugin
抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象
npm i -D extract-text-webpack-plugin
6.配置别名resovle
在项目js中可以直接引用别名,不用在找路径
module:{
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ['es2015']
}
}]
},
resolve: { //配置别名,在项目中可缩减引用路径
alias: {
threeModule: path.resolve(__dirname, 'js/96/three.module.js'),
buildLib: path.resolve(__dirname, 'js/item/build/buildLib.js'),
}
},
6.ES6转ES5,项目完结打包
1.安装babel
npm install babel-core --save-dev
npm install babel-loader@7.1.5 --save-dev //明确版本号
npm install babel-preset-es2015 --save-dev
npm install babel-plugin-transform-runtime
问题与解决
问题:
ERROR in ./app/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In E:\webpackSpace\webpack3\node_modules\babel-preset-es2015\lib\index.js
//babel-loader版本号不支持
解决:
//卸载原babel-loader
npm uninstall babel-loader
//安装明确版本
npm install babel-loader@7.1.5 --save-dev
2.webpack.config.js配置:
module:{
rules:[
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options:
{
presets: ['es2015'],
plugins: ['transform-runtime']
}
},
]
},
// exclude: node_modules目录下的文件除外
//presets: ['react','es2015'],来标识如何将ES6语法转成ES5以及如何转换React的JSX成js文件
7.项目实时打包
1.webpack.config.js配置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch":"webpack --watch",
},
2.执行
npm run watch
8.ES6转ES5,开发实时转码
1.安装
npm install --global babel-cli
2.webpack.config.js配置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
//单一js转换
"transcod": "babel app/main.js --watch --out-file build/main1.js"
//将app文件夹下所有js,转换到build文件夹下
// "transcod": "babel app --watch --out-dir build"
},
"babel":{
"presets": [ "es2015" ]
},
//transcod :自定义命名 打包使用
//app/main.js :转化文件位置
//--watch 等同于 -w : 实时监听
//--out-file 等同于 -o :输出
//build/main1.js :输出文件存放位置
3.执行
npm run transcod
4.实时更新只需在原js修改后ctrl+s即可
9.浏览器自动刷新
安装
npm install webpack-dev-server --save-dev
配置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --env development",
},
执行 npm run start (默认为:http://localhost:8080,一定执行控制台的地址 )
修改入口文件代码,保存后页面会自动刷新,提高开发效率。
注:该刷新是页面的全局刷新,根据需要可以局部刷新,需要配置。
10.DevServer
更多配置看文档:https://webpack.js.org/configuration/dev-server/
npm install webpack-dev-server --save-dev
module.exports = {
//...
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
};
//contentBase:根路径
//compress:true/false 压缩
//port:配置服务器端口号
创建一个html文件,端口号为port,自动到将打包后的js文件在该html中引用
1.https
devServer: {
port: 9000,
https: true
}
无配置:http://localhost:9000/
当前访问地址:https://localhost:9000/
11.配置ESLint实现代码自动规范
官网:https://eslint.org/docs/rules/
在代码编译是将代码中不规范的地方以警告,或者报错的方式显示出来
1.安装
npm install eslint --save-dev
2.配置package.json
"scripts": {
"lintjs":"eslint app/ webpack.*.js --cache"
},
// app/为入口文件目录,根据项目文件命名更改
3.新建文件.eslintrc.js
module.exports = {
env:{
browser:true,
commonjs:true,
es6:true,
node:true
},
exports:'eslint : recommended',
parserOptions:{
sourceType:'module',
},
rules:{
'comma-dangle':['error','always-multiline'],
indent:['error',2],
'linebreak-style':['error','unix'],
quotes:['error',single],
semi:['error','always'],
'no-unused-vars':['warn'],
'no-console':0,
},
};
4.执行
执行npm run lintjs 有错误警告在控制太显示出来
执行npm run lintjs – --fix 会修改代码中不规范的部分,警告需要手动修改
5.将错误信息在浏览器中显示配置信息
devServer: {
overlay:{
error:true,
warnings:true,
}
}
// 配合浏览器在动刷新,能快速的找到警告和代码错误
6.特定项忽略检测配置
1. 放置在库的前面,忽略检测
/* eslint-disable */
2.特定Obj,对象,变量,忽略 例如:TWEEN
/*global TWEEN:true*/
/*eslint no-undef: "error"*/
Gulb
node介绍
js文件,最初由客户端向服务器发送引入js文件的请求,服务器将整个js文件响应给客户端,由浏览器中的js引擎进行运行。
如果,服务器中有node环境(在node中具有浏览器的js引擎),则客户端的js请求,会在服务器中执行,服务器将执行结果,返回给客户端。
node(基于谷歌v8引擎)中的js引擎,将各大浏览器中js引擎,没单独拿出来,进行封装,升级(增加API,建立文件io操作,网络操作,数据库操作)。
第一步安装插件
1.Terminal插件,显示到当前的目录
2.Browsersync + Gulp.js
http://www.browsersync.cn/docs/gulp/
npm install browser-sync gulp --save-dev
3.gulp-less
npm install gulp-less -D
npm install --save-dev gulp-concat 文件打包
npm install --save-dev gulp-rename 文件重命名
npm install -g gulp-imagemin 图片压缩
npm install -g gulp-jslint js代码校验 慎用
npm install -g gulp-minify-css css压缩
npm install -g gulp-minify-html html压缩
npm install --save-dev gulp-uglify js压缩
npm install --save-dev gulp-seajs-combo
npm install gulp-seajs-combine
第二步搭建gulb环境
1.初始化项目
npm init -y
2.安装gulb依赖
npm install gulp --save-dev 局部安装
npm install -g gulp 全局安装
检查 gulp -v
3.创建gulpfile.js文件
1.初始化
var gulp = require('gulp');
gulp.task('default',function(){
console.log("gulp启动成功...")
})
2.gulp.src文件导入
gulp.task('less',function(){ //less要处理文件的类型
gulp.src('./src/css/main.less') //src要处理人物的位置
.pipe(gulp.dest('build'))
})
//./src/css/main.less 指定特定文件
// ['src/js/*js','src/css/*css','*.html'] 匹配指定文件夹下所有文件
// ['src/src/js/*js','src/js/!b*js'] 排除以b开头的js,切记排除不能放置在第一位
// src/**/*.js 当前目录下所有目录内的js
3.gulp.dest
4.gulp.task
5.gulp.watch
gulp.watch('src/**/*.js',function(e){ //less要处理文件的类型
// gulp.src(['src/**/*.js','src/css/*css']) // src要处理人物的位置
// .pipe(less()) //流
// .pipe(gulp.dest('build'))
console.log(e.type)
console.log(e.path)
})
webpack+项目实战
1.安装npm依赖包
在根目录下输入npm install安装
2.运行项目
输入命令行npm run dev(开发模式),或者npm run build(生产模式)