webpack学习

webpak学习心得

1.全局安装webpack(使用webpack命令)

npm install webpack -g
npm install webpack-cli -g

2.新建项目文件安装webpack

npm init -y
npm install webpack --save-dev
npm install webpack-cli --save-dev

3.如何使用webpack

1.什么是webpack？
webpack是一个前端打包工具，将js、css、图片等多个文件打包成一个或多个js文件

2.webpack的好处？
打包后缩小文件大小，减少访问服务器次数，解析ES6语法，实时代码更新。

3.webpack的基本命令

webpack  ./src/index.js ./dist/bound.js

将src目录下的index.js文件作为入口打包生成的文件指定到dist目录下的bound.js
高版本的webpack使用上述命令可能会报错，使用一下命令，指定输出文件

webpack ./src/index.js --output ./dist/bound.js

经常输入这种命令过于复杂

如何简化命令
1.配置webpack文件，创建webpack.config.js文件
默认格式：

modules.export = {

}

2.配置入口：

entry：'./src/index.js'
entry:{
	app:'./src/app.js',
	index:'./src/index.js'
}

3.配置出口：

const path = require('path');   //nodejs模块
output:{
	path:path.resolve(__dirname,'dist'), //指定路径
	filename:'bound.js'  //文件名
}

此时

webpack   ==    webpack ./src/index.js --output ./dist/bound.js

有了配置文件，webpack命令执行的时候回自动搜索webpack.config.js文件找到入口文件与出口文件。

4.loader的使用

• 什么是loader？
  帮助webpack打包的工具。
• 为什么要使用loader?
  webpack只能打包js文件，对于css文件、图片等文件需要借助loader
• 如何使用loader？
  loader的配置：

module:{     //配置loader文件
	rules:[     //配置规则
	{
	test:/.css$/,    //正则表达式，css文件
	use:['css-loader','style-loader']    //使用什么loader解析
	}]
}

别忘了

npm install css-loader style-loader --save-dev

因为webpack打包是根据依赖关系来的，因此只需在入口文件中设置：

import './src/index.css'

css文件就会被打包进来
那么图片文件呢？
配置loader

module:{
	rules:[
		test:/.(jpg|png|svg|gif)$/,
		use:'file-loader'
	]
}

同样

npm install file-loader --save-dev

图片文件就会被打包进来
但这里会有一个问题
图片打包后的地址是在dist文件下的，生成的img的src中的路径是与html同级的，
例如：(打包后的图片路径是根据hash值动态生成的)

显然浏览器找不到这张图片
解决方法

use:'file-loader?name=dist/[hash].[ext]'  

name指定图片名，hash值是自动生成的，ext是文件类型
则：

这样图片路径就是正确的。

结语
基本的webpack配置就是这样,前端小白学习思路，如有不对，希望各路大神指定！