yarn，webpack笔记

yarn包管理工具

中文官网地址：https://yarn.bootcss.com/

快速、可靠、安全的依赖管理工具。和npm类似，都是包管理工具，可以用于下载包，比npm快

下载

npm install --global yarn

yarn --version

使用

• 新建空白文件夹，执行命令

  yarn init

• 添加依赖

  yarn add 模块名
  yarn add 模块名@xx.xx.xx.xx
  
  yarn global add @vue/cli

@xx.xx.xx.xx是指版本号

webpack

https://www.webpackjs.com/

webpack是node的第三方模块包，用于打包代码

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)

把很多文件打包整合到一起，缩小项目体积，提高加载速度

功能：

less/sass -> css

ES6/7/8 ->ES5

html/css/js ->压缩合并

使用步骤

默认入口文件 ./src/index.js

默认出口文件 ./dist/main.js

1：初始化包环境
	yarn init
2:按装依赖包
	yarn add webpack webpack-cli -D
3:package.json配置scripts（自定义命令）
	"scripts":{
	  "build":"webpack"
	}
4:新建src/add/index.js
	export const addFn = (a,b)=>a + b
5:src/index.js 
	import { addFn } from "./add";
	console.log(addFn(3, 5));
6:运行打包命令
	yarn build
	or
	npm run build
总结：src并列处，生成默认dist目录和打包后默认main.js文件

代码变更，如何重新打包

4:新建src/tool/index.js
	export const getArrSum = arr => arr.reduce((sum, val) => {
	  sum += val
	},0)
5:src/index.js 
	import { addFn } from "./add";
	import { getArrSum } from "./tool"
	console.log(addFn(3, 5));
	console.log(getArrSum([3, 5, 6]));
	console.log(addFn(3, 5));
6:运行打包命令
	yarn build
总结：src是开发环境，dist是打包后 ，两个分别独立； 打包后代码压缩，变量压缩（简写）

webpack配置

如何指定webpack的入口和出口

1：src并列处，新建webpack.config.js 
2: 填入配置项

const path = require('path');
module.exports = {
  entry: './src/main.js',   //入口
  output: {
    path:path.join(__dirname,"dist"),   //出口路径
    filename: 'build.js'  //出口文件明
  }
};

案例-webpack打包隔行变色

• 初始化包环境
  yarn init
• 下载依赖包
  yarn add webpack webpack-cli -D
• 配置自定义打包命令 package.json

	"scripts":{
	  "build":"webpack"
	}

• 下载jquery。新建pubic/index.html

• src/main.js

  // import浏览器支持不是很好，使用webpack转换
  import $ from 'jquery';
  $(function () {
    $("#app li:nth-child(odd)").css('color','red');
    $("#app li:nth-child(even)").css('color','blue');
  })

• 执行打包命令观察效果

• 在dist目录下把public/index.html复制过来

• 在index.html中 手动引入打包后build.js

自动生成html文件

webpack只能打包js文件，插件HtmlWebpackPlugin简化了HTML文件的创建

• 按装

  npm install --save-dev html-webpack-plugin
  

• webpack.config.js

  var HtmlWebpackPlugin = require('html-webpack-plugin');
  const path = require('path');
  module.exports = {
    entry: './src/main.js',   //入口
    output: {
      path:path.join(__dirname,"dist"),   //出口路径
      filename: 'build.js'  //出口文件明
    },
    plugins: [new HtmlWebpackPlugin({
      // 以此为基准 生成打包后html文件
      template:'./public/index.html'
    })]
  };
  

• 重新打包，观察dist下是否多出html 运行

处理css文件–加载器

webpack默认只认识js文件和json文件

• 新建src/css/index.css

• 把css文件引入到入口文件(main.js) 被webpack打包
  import './css/index.css'

• 加载器 loaders加载器，让webpack处理其他类型的文件，打包到js中

  yarn add style-loader css-loader -D
  

• webpack.config.js