webpack环境配置和各种解析库的安装与使用

Webpack 打包工具

• 项目根下新建一个 webpack 的配置文件 webpack.config.js
• 添加 webpack 依赖的库

npm install webpack webpack-cli -D

• 在 package.json 中 配置 打包的命令

"scripts":  {
	"build": "webpack --config webpack.config.js"
}

• 执行打包命令、打包项目

npm run build

webpack 解析 JS

• 需要安装的 库

npm install babel-loader  @babel/core @babel/preset-env --save-dev

npm install core-js@3

将 html 进行打包

• hmtl-webpack-plugin 库

npm install html-webpack-plugin -D

• 将模板 index.html 放到项目的 public 目录

• 配置 模板 插件

const HtmlWebpackPlguin = require("html-webpack-plugin")


module.exports = {
	
	...
	
	...
	plugins: [
		
		new HtmlWebpackPlguin({
			template: path.resolve(__dirname, './public/index.html')
		})
	]
	
}

webpack 构建 vue项目

• 安装依赖库

npm install vue  vue-template-compiler  vue-loader  -D

• 修改 index.html 模板、添加 <div id="app"></div>

• 在项目src目录下新建一个 App.vue 文件

<template>
	<div id="app">
		
	</div>
</template>

• 在项目的 src 目录下、新建一个 main.js

import Vue from 'vue'
import App from './App.vue'


new Vue({
	
	// 渲染模板函数
	render: h => h(App)
	
}).$mount("#app")

• 在 webpack.config.js 中 配置 vue-loader

const { VueLoaderPlugin } = require("vue-loader")
 
module.exports = {
	module: {
		rules: [
			{
				test: /\.vue$/,
				use: ["vue-loader"]
			}
		]
	}
	....
	
	plugins: [
		
		new VueLoaderPlugin()
	]
}

配置 css-loader 、解析 css

npm install style-loader  css-loader  less-loader less  -D


{
	test: /\.(css|less)$/, 
	// 多个 loader 的执行顺序是 从 右到左 
	use: ["style-loader", "css-loader", "less-loader"]
}

配置处理图片的 loader file-loader ,

• url-loader (可以将小图片设置为 dataUrl格式、不用在磁盘中进行存储)

npm install file-loader -D


{
	test: /\.(jpe?g|png|gif)$/, 
	// 多个 loader 的执行顺序是 从 右到左 
	use: {
		loader: "file-loader", 
		options: {
			outputPath: 'images', 
			name: [name].[contenthash:6].[ext] ,
			esModule: false
		}
	}
}

在 webpack中，搭建一个 开发服务器

• 需要安装依赖库

npm install webpack-dev-server@4.0.0-beta.2 -D

webpack-dev-server 最新版本 3.11.2 ，该版本依赖的 webpack-cli 只能用 3.X

解决方案
1. 降低 webpack-cli
2. 提升 webpack-dev-server 为4.0 测试版本

• 在 webpack.config.js 配置文件中，配置开发服务器

module.exports = {
	... 
	devServer : {
		host: 127.0.0.1 ,
		port: 8080, 
		compress: true,  // 可配
		hot: true ,  // 支持热部署
	}
}

• 配置 启动服务器的命令

"scripts": {
	"serve": "webpack-dev-server --config webpack.config.js"
}

配置 resolve解析

resolve: {
	// 配置别名
	alias: {
		'@': path.resolve(__dirname, "./src")
	},
	// ... 代表添加 默认支持的扩展名
	extensions: ['.vue', "..."], 
	mainFiles: ['index'],
	// 以 / 开头的静态资源 该从哪里去找
	roots: [ path.resolve(__dirname, "./public") ] ,
},