第三块 Vue的前置知识（上）

学习vue的前置知识

1. NPM包管理工具

Node Package Manager

1.1 安装npm工具

http://nodejs.cn/download/

一路下一步下一步就行了

1.2 配置npm

cmd下配置npm

npm config get registry

切换淘宝镜像

npx nrm use taobao

1.3 npm使用

查看包的版本

npm list
npm list -g

运行依赖和开发依赖

npm install -save xxx
npm install -save-dev xxx

1.4 package.json

初始化package.json

npm init
npm init --yes

package.json中包的版本

"^3.x.x" x会是最新的小版本
"~3.1.x" x会是最新的小版本
"3.1.2" 就是这个

1.5 ES语法转换工具

安装babel

npm install --save-dev babel-cli

配置bable

{
	"presets":["es2015","stage-2"],//设置转码规则
	"plugins":["transform-runtime"]//设置插件
}

安装需要的库

npm install babel-core babel-preset-es2015 babel-plugin-transform-runtime babel-preset-stage-2 --save-dev

再配置package.json

在根目录下创建lib和src文件夹

"scripts":{"build":"babel src -w -d lib"}

编译转换

npm run build

1.6 yarn

安装

npm install -g yarn

检查

tarn --version

基本使用

1.7 npm与yarn对比

npm是同步安装

yarn是异步安装

npm5之后其实也没有太大区别

2. Webpack

webpack是一个模块打包器(构建工具)。它的主要目标是将JavaScript文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换(transform)、打包(bundle)或包裹(package)任何资源(resource or asset)。

2.1 打包原理

树结构:在一个入口文件中引入所有资源，形成所有依赖关系树状图

模块:模块就是模块可以是ES6模块也可以是commonJS或者AMD模块，对于webpack来说，所有的资源(css.img.….)

chunk:打包过程中被操作的模块文件叫做chunk,例如异步加载一个模块就是一个chunk

bundel: bundle是最后打包后的文件,最终文件可以和chunk长的一模一样,;但是大部分情况下他是多个chunk的集合

2.2 安装webpack

npm初始化

npm init -y

安装webpack和脚手架 -D是开发环境

npm i webpack webpack-cli -D

简单打包

webpack --mode development
webpack --mode production

2.3 webpack.config.js核心配置

在根目录下创建webpack.config.js文件，不一定要叫做webpack.config.js，但它是默认的，打包时方便

//拼路径
const {resolve} = require('path');

module.exports = {
    //webpack配置
    
    entry:'./src/index.js',
    
    output:{
        filename:"build.js",
        path:resolve(__dirname,"build")
    },
    
    //loder配置
    module:{
        rules:[
            
        ]
    },
    
    //plugin配置
    plugin:{
    
	},
    
    mode:"development"//production
}

2.4 entry

单入单出

entry: './src/index.js'

多如单出

entry:["./src/index.js","./src/a.js"]

多如多出 Object

entry:{
	one:'./src/index.js',
	two:'./src/a.js'
}

特殊分情况多如多出

entry:{
	one:["./src/index.js","./src/a.js"],
	two:'./src/main.js'
}

2.5 打包压缩html资源

安装插件

npm i html-webpack-plugin -D

配置webpack.config.js文件

//拼路径
const {resolve} = require('path');
//引入方法
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    //webpack配置
    
    entry:'./src/index.js',
    
    output:{
        filename:"build.js",
        path:resolve(__dirname,"build")
    },
    
    //loder配置
    module:{
        rules:[
            
        ]
    },
    
    //plugin配置
    plugin:{
    	new HtmlWebpackPlugin({
        template:"./src/demo.html",
        filename:"demo.html"
        
        //压缩html代码
        minify: {
		//移除空格
		collapseWhitespace:true,
        //移除注释
		removeComments:true
   	 }	
    })

	},
    
    mode:"development"//production
}

webpack打包多html开发案例

注意，打包顺序是从右往左的 chunks: [“index” , “vendor”],

//多个entry
entry: {
	vendor: ['jquery' ,'./src/js/common.js'],
    index: "./src/js/index.js",
	cart: "./src/js/cart.js"
},

//负责打包html文件将js注入到html中'，minify压缩html
    new HtmlWebpackPlugin({
		filename: "index.html",
		template: "./src/index.html",
        //注意，打包顺序是从右往左的
        chunks: ["index" , "vendor"],
        
        minify:{
			removeComment:true,
            collapseWhitespace:true
        }
	}),

    new HtmlWebpackPlugin({
        filename: "cart.html",
		template: "./src/cart.html",
        chunks: ["cart" ,"vendor"]
    }),

2.6 打包css资源

安装loder

css-loader作用是将css放入js中

style-loader作用是将css放入html中

npm i css-loader style-loader -D

配置webpack.config.js文件

 //loder配置
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']//从右到左，从上到下
            }
        ]
    },

目录结构

index.js

require('./style.css');

2.6.1 打包less和sass资源

安装

npm i less less-loader -D
npm i node-sass sass-loader -D

配置webpack.config.js文件

注意就是scss(/.scss$/)

//loder配置
    module:{
        rules:[
            { test:/\.css$/,use:['style-loader','css-loader'] },//从右到左，从上到下
            { test:/\.less$/,use:['style-loader','css-loader','less-loader'] },//从右到左，从上到下
            { test:/\.scss$/,use:['style-loader','css-loader','sass-loader'] }//从右到左，从上到下
        ]
    },

index.js

require( ' ./style.css');
require( './ lessstyleless ')
require( './stylesass.scss ')

目录结构

2.6.2 提取单独的css文件

安装插件

npm i mini-css-extract-plugin -D

引入和使用插件

//拼路径
const {resolve} = require('path');
//引入方法
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    //webpack配置
    
entry:'./src/index.js',

output:{
    filename:"build.js",
    path:resolve(__dirname,"build")
},

//loder配置
module:{
        rules:[
            //{ test:/\.css$/,use:['style-loader','css-loader'] },//从右到左，从上到下
            //会合并成一个文件
            { test:/\.css$/,use:['MiniCssExtractPlugin.loader','css-loader'] },//换成独立的文件
            { test:/\.less$/,use:['MiniCssExtractPlugin.loader','css-loader','less-loader'] },//从右到左，从上到下
            { test:/\.scss$/,use:['MiniCssExtractPlugin.loader','css-loader','sass-loader'] }//从右到左，从上到下
        ]
    },

//plugin配置
plugin:{
	new HtmlWebpackPlugin({
        template:"./src/demo.html",
        filename:"demo.html"
	}),
    
    MiniCssExtractPlugin({
    	filename:'demo.css',//指定文件名称
	})
   	
})

},

mode:"development"//production
}

2.6.3 处理css兼容性

使用的流程:

webpack.config.js文件(postcss-loader) -> postcss.config.js文件 -> package.json(查看需要适配哪些浏览器)->webpack(打包)

安装

npm i post-loader postcss-preset-env -D

创建postcss.config.js文件引入插件

module.exports = {
    plugins: [
    	require('postcss-preset-env')()
    ]
}

配置webpack.config.js文件

//拼路径
const {resolve} = require('path');
//引入方法
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    //webpack配置
    
entry:'./src/index.js',

output:{
    filename:"build.js",
    path:resolve(__dirname,"build")
},

//loder配置
module:{
        rules:[
            //{ test:/\.css$/,use:['style-loader','css-loader'] },//从右到左，从上到下
            //会合并成一个文件
            //{ test:/\.css$/,use:['MiniCssExtractPlugin.loader','css-loader'] },//换成独立的文件
            { test:/\.css$/,use:['MiniCssExtractPlugin.loader','postcss-loader'] },//换成独立的文件
            { test:/\.less$/,use:['MiniCssExtractPlugin.loader','css-loader','less-loader','postcss-loader'] },//从右到左，从上到下
            { test:/\.scss$/,use:['MiniCssExtractPlugin.loader','css-loader','sass-loader','postcss-loader'] }//从右到左，从上到下
        ]
    },

//plugin配置
plugin:{
	new HtmlWebpackPlugin({
        template:"./src/demo.html",
        filename:"demo.html"
	}),
    
    MiniCssExtractPlugin({
    	filename:'demo.css',//指定文件名称
	}),
   	
})

},

mode:"development"//production
}

package.json指定适配的浏览器

"browserslist": [
    "last 1 version",
    "> 0.2%",
    "maintained node versions",
    "not dead"
  ]

2.6.4 压缩css

安装

npm i optimize-css-assets-webpack-plugin -D

配置webpack.config.js文件

//拼路径
const {resolve} = require('path');
//引入方法
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

module.exports = {
    //webpack配置
    
entry:'./src/index.js',

output:{
    filename:"build.js",
    path:resolve(__dirname,"build")
},

//loder配置
module:{
        rules:[
            //{ test:/\.css$/,use:['style-loader','css-loader'] },//从右到左，从上到下
            //会合并成一个文件
            //{ test:/\.css$/,use:['MiniCssExtractPlugin.loader','css-loader'] },//换成独立的文件
            { test:/\.css$/,use:['MiniCssExtractPlugin.loader','postcss-loader'] },//换成独立的文件
            { test:/\.less$/,use:['MiniCssExtractPlugin.loader','css-loader','less-loader','postcss-loader'] },//从右到左，从上到下
            { test:/\.scss$/,use:['MiniCssExtractPlugin.loader','css-loader','sass-loader','postcss-loader'] }//从右到左，从上到下
        ]
    },

//plugin配置
plugin:{
	new HtmlWebpackPlugin({
        template:"./src/demo.html",
        filename:"demo.html"
	}),
    
    MiniCssExtractPlugin({
    	filename:'demo.css',//指定文件名称
	}),
   	
    //一般上线才压缩
    //new OptimizeCssAssetsWebpackPlugin(),
})

},

mode:"development"//production
}

2.6.5 打包图片资源

安装

npm i url-loader file-loader html-loader -D

css中的图片处理

		{
                test:/\.(png|svg|jpg|gif)$/,//图片类型
                loader: 'url-loader',
                options:{
                	publicPath:'./images/', //位置
                	outputPath:'images/',   //输出位置
                	limit:1024 * 8,         //需要做base64编码的图片大小限制
                	name:'[name][hash:10].[ext]',//图片名称
                }
           }

html中的图片处理

		   {
                test:/\.(html)$/,//图片类型
                loader: 'html-loader',
           }

2.6.6 其他资源和字体图标资源

资源 https://www.iconfont.cn/

{
    exclude: /\.(jsljson|html|css|less|scss|png|gif|jpg|jpeg)$/,
    loader: 'file-loader ',
    options: {
    	outputPath: 'font/ ',
    	publicPath: './font',
    }
}

2.6.7 publicPath与outputPath区别

publicPath是指引用路径，outputPath是指输出路径
输出路径是指在本地打包后具体在dist下的文件位置
引用路径是指打包后设置对静态资源引用的位置

2.7 上线配置

安装取出多余css插件

npm i purgecss-webpack-plugin -D

新增配置webpack.js

//拼路径
const {resolve,join} = require('path');
const PurgecssPlugin = require('purgecss-webpack-plugin');
const glob = require('glob');
const PATHS = { src: join(__dirname,'src') }


plugin:{
	new HtmlWebpackPlugin({
        template:"./src/demo.html",
        filename:"demo.html"
	}),
    
    MiniCssExtractPlugin({
    	filename:'demo.css',//指定文件名称
	}),
   	
    //一般上线才压缩
    //new OptimizeCssAssetsWebpackPlugin(),
        
    new PurgecssWebpackPlugin({
        paths: glob.sync(`${PATHS.src}/**/*`,{ nodir:true }),
    }),
})

2.8 代码规范

安装检查规则工具eslint

npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D

新增配置package.json

"eslintConfig":{
	"extends":"airbnb-base"
}

新增配置webpack.js

{
	test:/\.js$/,
	exclude:'/node_moudles/',
	loader: 'eslint-loader',
    options:{
        fix:true
    }
}

会提示console打印的warning，因为上线后不太需要，当然可以以不让它警告

//eslint-disable-next-line
console.log("xxx");

2.9 开发服务器devServer

安装

npm i webpack-dev-server -D

配置webpack.config.js

target: "web",

devServer:{
	port:8888, //自订端口
	compress:true, //自动编译
	open:true, 
	hot:true,//热更新
}

配置package.json文件

"script":{
    "dev":"webpack serve --mode development --port 8888",
    "build":"webpakc --mode production"
}

启动

npm run build
npm run dev

最后总结

Vue和React也是使用了webpack这些功能

PREVIOUS第一节 go语言的基本概念

NEXT第二节 Go语言基础语法（一）