关于我对webpack的浅薄理解

关于我对webpack的部分理解

当前Web开发所面临的一些问题

 1.文件依赖关系的复杂
 2.静态资源请求的效率比较地下
 3.模块化支持并不友好
 4.浏览器对高级JS语言特性的兼容性比较低

针对以上的问题 出现了webpack工具，那么什么是webpack工具呢?

他是一个静态资源打包的工具 可以将js,image,css 等资源当成一个模块进行打包。

其中的核心概念

1.入口 entry: 打包起点，可以有一个或者多个，一般都是一些js文件；webpack会从七点文件开始，寻找七点之间或者间接依赖的资源，作为将来打包的原始数据。
2.输出 output: 一般包含两个属性：path和filename;用来告诉webpack打包的目标文件夹，以及文件的名称；目的地可以是有多个。
3.加载器 loader: webpack本身只识别js文件，如果加载非JS文件，必须指定额外的loader；将这些文件转为webpack能处理的有效模块。
4.插件plugins: 插件可以扩展webpack功能，让其不止能完成打包，甚至更加复杂的功能，对打包功能进行优化，压缩，提高效率。

关于Webpack如何使用的问题

1.首先本地安装webpack
  npm install webpack webpack-cli --save-dev
2.在根目录中 创建webpack.config.js文件
3.在上述文件中初始化
  module.exports = {
	mode: 'development'	//mode 用来指定构建模式
  }
4.在packahe.json配置文件中的script节点，增加build脚本
  "script": {
	"dev": "webpack"	//script节点下的脚本可以通过npm run执行
  }
5.在终端中运行npm run build，打包

补充点

配置打包的入口和出口

4.0版本默认约定 
  1.打包的入口文件 src -->index.js
  2.打包的输出文件 dist -->main.js

自动打包功能

 1.npm install webpack-dev-server-D 命令。安装支持项目自动打包的工具

 2.修改package.json ->scripts中的build命令
  "script": {
	"build": "webpack-dev-server"
  }
 3.将src->index.html中, script脚本的引用路径, 修改为’/build.js’
 4.运行 npm run命令, 更新进行打包

配置html-webpack-plugin生成预览页面

 1.运行 npm install html-webpack-plugin -D 命令, 安装生成预览页面的插件
 2.修改webpack-config.js文件头部区域, 添加如下配置信息
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const htmlPlugin = new HtmlWebpackPlugin({
	template: './src/index.html',
	filename: 'index.html'
 })
 3.修改 webpack.config.js文件中向外暴露的配置对象, 新增如下配置节点
    plugins: [htmlPlugin]

Vue单文件组件的基本用法

webpack中配置vue组件的加载器
  1.运行npm i vue-loader vue-template-compiler -D命令
  2.在webpack.config.js配置文件中, 添加vue-loader的配置项
    const VueLoaderPlugin = require('vue-loader/lib/plugin')
    reules: {test: /\.vue$/, loader: 'vue-loader'}
    plugins: { new VueLoaderPlugin()  }
  3.安装vue
  4.webpack打包
    通过package.json文件添加命令
    "bulid": "webpack -p"

标签：文件,vue,浅薄,js,webpack,理解,loader,打包
来源： https://www.cnblogs.com/JsonPig/p/15509818.html