webpack的使用与webpack react环境搭建

核心概念 webpack.config.js

1. entry 入口

2. output 出口

   filename 文件名称
   path 地址

3. mode 模式

   production 产品模式
   development 开发模式

4. plugins 插件

   html-webpack-plugin 处理html文件

//使用
const htmlWebpackPlugin = require("html-webpack-plugin")
plugins:[new htmlWebpackPlugin()]

//配置
 template:__dirname+"/public/index.html"  //模板
 title:"firstPage"
 minify //压缩

//模板语法
<%= htmlWebpackPlugin.options.title  %>

clean-webpack-plugin 清理dist目录

const { CleanWebpackPlugin }  = require("clean-webpack-plugin")

new CleanWebpackPlugin()

copy-webpack-plugin 拷贝文件(设置静态资源目录)

const  CopyWebpackPlugin = require('copy-webpack-plugin')

new CopyWebpackPlugin({
   patterns:[
  	 {from:xxx,to:xxx},
   	 {from:yyy,to:yyy}
   ]
})

5. devServer 本地服务器
   安装 npm i webpack-dev-server -D

//配置
“serve”:webpack-dev-server --mode development

	devServer:{
		host:"localhost", //域名
		port:8081, //端口 
		hot:true, //热更新  true或false
		open:true,//打开浏览器 true或false
	}

6. loader

module:{
rules:[ //规则
	{ 
	test:/\.css$/,
	use:[minCssExtractPlugin.loader,/*'style-loader',*/'css-loader']}
]
}

7. resolve 配置

 resolve: {
		 alias: {
			{'@': path.resolve(__dirname, './src')}, 
			//path node 内置的方法，处理路径
		}
 },

命令配置

package.json文件

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
  },

执行 (cmd)

 npm run dev  

 npm run start

loader

• 处理css
  css-loader 分析css关系，需要加载哪些css文件
  style-loader 把css插入到html head标签里面
  miniCssExtractPlugin.loader css抽取为单独文件

//导入
const  miniCssExtractPlugin =require("mini-css-extract-plugin.loader") 

plugins[new miniCssExtractPlugin()]

	optimize-css-assets-webpack-plugin 压缩css

//导入
const optimizeCSS = require("optimize-css-assets-webpack-plugin");

optimization: {minimizer: [ new optimizeCSS()]	},

	less 处理less文件 less-loader 加载less文件

{test:/\.less$/
 use:["style-loader","css-loader","less-loader"]
}

	处理css前缀 postcss-loader

autoprefixer

• 处理文件
  file-loader
  url-loader
  将小的图片转换为base64格式
  处理字体

{
	test:/\.(eot|woff2|woff|ttf|svg)/,
	use:[{loader:'url-loader',options:{limit:10,name:'font/[name].[hash:5].[ext]'}}]
 },

	处理图片

{
	test:/\.(jpg|png|jpeg|gif|bmp|svg|ico)$/,
	use:[
			{
				loader:'url-loader',
				options:{limit:100000,name:'images/[name][hash:5].[ext]'}
			}
	]
}

npm安装

	npm install xxxx  --save  全称
	npm ixxx -S  简写
	产品模式
		
	npm install xxxx --save-dev  全称
	npm i xxx -D  简写
	开发模式

三个hash

	hash 只要项目里有文件更改，整个项目构建的hash值都会更改
	chunkhash 每一次构建后生成的哈希值都不一样
	contenthash 内容发生修改更改
	[name] 默认的chunkname
	[contenthash:7] 截取7位 runserve不能用

配置react webpack环境

安装-D

• babel-loader 处理es6模块

• @babel/core babel核心模块

• @babel/preset-env 环境预设

• @babel/preset-react react运行环境 jsx语法支持

• babel/polyfill 把es6的方法转换为ES6

• @babel/plugin-transform-runtime 按需加载polyfill 方法
  安装-S
  react react方法
  react-dom 渲染dom
  babelrc 配置

{ "presets": ["@babel/preset-env","@babel/preset-react"], }

index.js

import ReactDom from ‘react-dom’
import React,{Component} from 'react'
class App extends Component{
  	return (....)
}
ReactDom.render(<App>,document.getElementById("root"))

多文件入口(配置)

//entry入口
entry:{
	vue:path.resolve(__dirname, '../src/main.js'),
	react:path.resolve(__dirname, '../src/index.js')
}	

//output出口
output:{
// publicPath:'./',
 // 配置根目录 默认是/ 可以配成相对目录./
	filename:"[name]-[hash:7].js",
	path:path.resolve(__dirname, '../dist') 
},

//plugin
new htmlWebpackPlugin({
	title: 'vue,我的第一个webpack',
	minify:true,
	chunks: ['vue'],
}),

new htmlWebpackPlugin({
	title: 'react,我的第一个webpack',
	 minify:true,
	chunks: ['react'],
	template:path.resolve(__dirname, '../public/react.html'),
 filename: 'react.html'
}),

devtools 开发工具

source map :创建一个压缩过的文件与源文件的映射关系，出错可以报错，更加准确
cheap-module-eval-source-map 开发模式
cheap-module-source-map 产品模式