webpack

##定义

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
##作用
很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法.
···a:模块化.让我们可以把复杂的程序细化为小的文件;
···b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别;
···c:scss，less等CSS预处理器
这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的，这就为WebPack类的工具的出现提供了需求。
##安装webpack
1.安装全局webpack:
····sudo npm install webpack webpack-cli webpack-dev-server -g
2.删除全局webpack:
····npm uninstall -g webpack
3.删除局部webpack:
····npm un webpack
4.删除全局webpack-cli:
···npm uninstall -g webpack-cli
5.删除局部webpack-cli:
····npm uninstall webpack-cli
6.检查webpack的残余文件:
···用ls命令查看一下是否有这几个文件
······node_modules
······package-lock.json
······package.json
···如果有上面的3个文件,就执行下面的这行命令(删除的意思):
···rm -rf node_modules package-lock.json package.json
···但是要好好去了解一下 rm 和 rm -rf 的区别
7.查看版本:
···webpack -v
##使用webpack
打开项目所在目录
1.使用npm init -y ,使用npm包管理工具管理项目,会创建package.json文件
2.使用webpack命令打包文件
##webpack的配置文件

• 文件名:webpack.config.js
• 在使用了配置文件后,就可以直接使用命令 webpack 执行打包了

const path = require('path')
module.exports = {
    entry : path.join(__dirname,'./src/index.js'), //入口
	output : {   //出口
        path : path.join(__dirname,'./dist'),
        filename : 'bundle.js'
    }    
}

##用webpack-dev-server实现自动打包

访问: localhost://8080/
通过端口访问时,所引用的bundle.js不再是dist文件夹下的bundle.js了,而是存放在内存中,虚拟的(就是快).所以在index.html页面引用时要用<script src="/bundle.js"/>
使用: npm run dev

package.json文件:
{
  "name": "webpack-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
	"dev": "webpack-dev-server --open --contentBase src --hot" 
	//配置这里,在终端执行npm run dev就可以开启服务.更改bundle.js文件后就不用在手动打包了.
	//(--open)自动打开网页
	//(--contentBase src)自动打开网页后进入index.html文件
	//(--hot) 热加载,免除每次重新打包bundle.js,样式可以无刷新页面应用
	//(--port 3000) 更改端口号
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.3.1"
  }
}

##插件

安装html-webpack-plugin插件: npm i html-webpack-plugin -D
使用这个插件,可以把页面放置到内存中
在index.html中不用在引入<script src="/bundle.js"/>,本插件会自动引入
浏览器打开时默认访问index.html页面

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin') //导入插件 
module.exports = {
    entry : path.join(__dirname,'./src/index.js'), //入口
	output : {   //出口
        path : path.join(__dirname,'./dist'),
        filename : 'bundle.js'
    },
    plugins:[   //是个数组
        new htmlWebpackPlugin({  //插件配置
            template: path.join(__dirname,'./src/index.html'), //指定模版
            filename: 'index.html' //指定生成的文件名称
        })
    ]
}

##处理css和less文件

1.在index.js文件中导入css文件: import './css/index.css' import './css/index.less'
2.安装style-loader和css-loader: npm i style-loader css-loader -D npm i less-loader -D
3.在webpack.config.js文件中配置module节点:

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin') //导入插件
module.exports = {
    entry : path.join(__dirname,'./src/index.js'),
    output : {
        path : path.join(__dirname,'./dist'),
        filename : 'bundle.js'
    },
    plugins:[   //是个数组
        new htmlWebpackPlugin({  //插件配置
            template: path.join(__dirname,'./src/index.html'), //指定模版
            filename: 'index.html' //指定生成的文件名称
        })
    ],
    module:{    //这个节点用于配置所以第三方模块、加载器
        rules:[ //所有第三方模块的匹配规则
            { test:/\.css$/, use:['style-loader','css-loader']}, //配置处理css文件的第三方loader规则
            {test:/\.less$/, use:['style-loader','css-loader','less-loader']} //处理顺序:从右到左
        ]
    }
} 

##处理样式文件中的url地址

1.安装url-loader: npm i url-loader file-loader -D
2.配置匹配规则:

    module:{    //这个节点用于配置所以第三方模块、加载器
        rules:[ //所有第三方模块的匹配规则
            { test:/\.css$/, use:['style-loader','css-loader']}, //配置处理css文件的第三方loader规则
            {test:/\.less$/, use:['style-loader','css-loader','less-loader']}, //处理顺序:从右到左
            {test:/\.(jpg|png|gif|jpeg)/, use:'url-loader?limit=1000&name=[hash 8]+[name].[ext]'}, 
            //limit:图片大小小于1000时,会被base64转换,大于则不会
            //名称:8位hash值+本来图片的名字
            {test:/\.(ttf|svg|eot|woff|woff2)$/, use:'url-loader'} //处理字体
        ]
    }
} 

应用Bootstrap的样式

1.安装bootstrap: npm i bootstrap -S
(-S就是应用于生产环境,是安装在package.json的dependencies中的)
(-D就是应用于开发环境,是安装在package.json的devDependencies中的)
2.在index.js中导入bootstrap: bootstrap/dist/css/bootstrap.css 这个在node_modules文件夹下
3.配置匹配规则(因为在bootstrap中有字体文件,所以需要配置):

module:{   
   rules:[ 
       {test:/\.(ttf|svg|eot|woff|woff2)$/, use:'url-loader'} //处理字体文件
   ]
} 

##Babel

作用:可以将高级语法转换为低级语法,供浏览器使用
1.在webpack中可以运行如下两套命令,去安装Babel相关的loader功能
···第一套(核心插件包):npm i babel-core babel-loader babel-plugin-transform-runtime -D
···第二套(语法包):npm i babel-preset-env babel-preset-stage-0 -D
2.打开webpack.config.js文件,在module节点下的rules数组中添加一个新的匹配规则:
···{ test: /.js$/, use: ‘babel-loader’, exclude: /node_modules/ } //exclude:正则表达式
3.在项目的根目录下创建.babelrc的配置文件,属于json格式(不能有注释)
···在配置时,前面的babel-plugin和babel-preset等都省略掉
···{
··· “presets”: [“env”, “stage-0”], //预设或者语法
··· “plugins”: [“transform-runtime”] //暂时只装了一个插件
···}
##webpack导入vue
1.在index.js文件中导入vue: import Vue from “vue”
2.在webpack.config.js中增加一个节点:

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin') //导入插件
module.exports = {
    entry : path.join(__dirname,'./src/index.js'),
    output : {
        path : path.join(__dirname,'./dist'),
        filename : 'bundle.js'
    },
    plugins:[   //是个数组
        new htmlWebpackPlugin({  //插件配置
            template: path.join(__dirname,'./src/index.html'), //指定模版
            filename: 'index.html' //指定生成的文件名称
        })
    ],
    module:{    //这个节点用于配置所以第三方模块、加载器
        rules:[ //所有第三方模块的匹配规则
            { test:/\.css$/, use:['style-loader','css-loader']}, //配置处理css文件的第三方loader规则
            {test:/\.less$/, use:['style-loader','css-loader','less-loader']} //处理顺序:从右到左
        ],
     resolve:{ 
		alias: { //修改vue的路径
			"vue$": "vue/dist/vue.js"
		}
	}   
    }

##使用vue

1.安装vue: npm i vue -S
2.由于webpack推荐使用.vue文件定义模版组件(由3部分组成:<template></template> <script></script> <style></style>),所以需要安装能够解析这种文件的loader,安装加载器: npm i vue-loader vue-template-compiler -D
3.使用import login from ‘./login.vue’导入vue组件
4.渲染到页面: var vm = new Vue({el:’#app’, …, render: c=>c(login)})
5.在配置文件中,新增匹配项: {test: /.vue$/, use: “vue-loader”}

<template>
	<div>
		<h1>这是登录组件---{{ msg }}</h1>
	<div>
</tempalte>
<script>
		export default{ //向外暴露成员,只可以暴露一个成员(名称可以自定);export可以暴露多个成员(按需导出,必须严格按照名称接收),接收使用{}
		data(){ //组件中的data是function
			return{
				msg:"123"
			}
		},
		methods:{
		}
	}
</script> 
<style>

</style>