Hadoop 系统入门+核心精讲
Hadoop 系统入门+核心精讲
webpack5简单搭建vue项目
写在前面download
webpack在当今的前端范畴曾经是不可缺失的一局部了，不多说了，先理解一下webpack的四大中心
entry（入口）
entry是一切的起点，经过import通知webpack援用了哪些模块
// index.js import module from './module' import './index.css' import './index.scss' module() console.log(2222) 复制代码复制代码
loader
假如将非js文件当作模块援用进来的时分，webpack是不具备转换非js文件的，这时能够经过loader把css,scss停止转换，loader是从下到上，从右到左编译的
// webpack.config.js
module.exports = {
mode:'development',
entry: './src/index.js',
output: {
path: __dirname + '/dist'
},
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
}
]
}
}
复制代码复制代码plugin （插件）
plugin主要是对loader的一个扩展，经过html-webpack-plugin打包后会创立html文件
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack =require('webpack')
module.exports = {
mode:'development',
entry: './src/index.js',
output: {
path: __dirname + '/dist'
},
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
},
{
test: /\.html$/i,
loader: "html-loader",
},
{
test: /\.md$/i,
use: ["html-loader",'markdown-loader'],
},
]
},
plugins:[
new webpack.ProgressPlugin(), //打包进度报告
new HtmlWebpackPlugin()
]
}
复制代码复制代码output (出口)
望文生义就是打包后导出的文件在哪
好了 根本的理解就到这 如今我们能够从0搭建一个vue项目
从0搭建一个vue项目
题外话download
没学webpack之前，就在想vue是怎样打包的，入口文件只要一个main.js,而且单文件里面的js,css是如何获取的，学了之后才发现原来有个vue-loader这个中心，vue文件的编译都是基于这个中心
初始化项目
// 初始化项目 创立一个package.json npm init -y // 装置webpack npm i webpack webpack -D // 创立一个html模板 mkdir public && cd public // 寄存开发文件 mkdir src && cd src 复制代码复制代码
目录构造如下
├── public # 静态资源 │ └── index.html # html模板 ├── src |—— main.js # webpack入口文件 复制代码复制代码
新建webpack.config.js
先配置一些根本的东西
// webpack.config.js
// 加上这个vscode会有提示
/** @type {import('webpack').Configuration} */
const path = require('path');
const webpack =require('webpack');
function resolve(dir) {
return path.resolve(__dirname, dir)
}
module.exports = {
mode: 'development',
devtool: 'inline-source-map', // 提示哪行错误
entry: './src/main.js',
output: {
path: __dirname + '/dist',
filename: 'static/js/[name].[contenthash].js',
clean: true // 打包肃清旧文件
},
plugins: [
new webpack.ProgressPlugin(), //打包进度报告
new HtmlWebpackPlugin({
template: './public/index.html'
})
]
}
复制代码复制代码根本配置写好后，就能够开端在src里面写vue的代码了，这里需求npm i vue装置好需求的开发的工具，然后写好后我们来配置一下解析vue相关的内容，前面提到的重中之重，也就是中心vue-loader
vue-loader
装置
npm i vue-loader vue-template-compiler -D 复制代码复制代码
配置
// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader');
module.exports ={
// ...其他配置
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
//...其他插件
// 请确保引入这个插件！
new VueLoaderPlugin()
]
}
复制代码复制代码这个根本的配置就曾经打包胜利了，这里能够经过装置webpack-dev-server开启一个效劳器看看效果
webpack-dev-server
创立一个运转脚本，运转npm run dev
"scripts": {
"build": "webpack",
"dev": "webpack serve --open"
},
复制代码复制代码在webpack.config.js添加devServer配置download
// webpack.config.js
module.exports ={
// ...其他配置
devServer: {
static: './dist', // 开启的目的文件
hot: true, // 开启热更新
}
}
复制代码复制代码就这一段代码是不是很简单,在这里一个根本的打包，构建曾经是能够的了，如今我们再来加点东西
加载css csss 文件
首先装置css-loader sass-loader sass
npm i css-loader sass-loader sass -D 复制代码复制代码
vue-style-loader是vue-loader里面自带的loader,不需求额外引入
module: {
rules: [
// ...其他配置
{
test: /\.scss$/,
use: ['vue-style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader']
}
]
}
复制代码复制代码加载图片
webpack5里面内置理解析图片类型的，所以不需求我们额外装置其他loader
module: {
rules: [
// ...其他配置
{
test: /\.(png|jpg|gif)$/i,
type: 'asset/resource',
}
]
}
复制代码复制代码加载字体
module: {
rules: [
// ...其他配置
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource'
},
]
}
复制代码复制代码运用别名
假如运用@/view/index这种文件途径的需求设置别名
resolve: {
alias: {
'@': resolve('src')
}
}
复制代码复制代码extensions省略文件途径
经过extensions能够不用写文件后缀
resolve: {
// ...其他配置
extensions: ['.js', '.json', '.vue', 'css']
}
复制代码复制代码proxy代理download
在开发环境中能够经过proxy处置跨域
devServer: {
// ...其他配置
proxy: {
'/api': {
target: 'https://xxx.xxx',
changeOrigin: true // 这个必需要写
}
},
},
复制代码复制代码优化
美化打包进度条
想要花里胡哨的进度条?? 这里有
npm i progress-bar-webpack-plugin -D
复制代码
const ProgressBarPlugin =require('progress-bar-webpack-plugin')
plugins: [
//...其他插件
new ProgressBarPlugin()
]
复制代码复制代码打包输出指定文件夹
经过type:'asset/resource'打包到指定文件夹里面，这个相当于file-loader，能够经过generator设置打包途径
module: {
rules: [
// ...其他配置
{
type:'asset/resource',
generator: {
filename: 'static/文件夹称号/[hash][ext][query]'
}
}
]
复制代码复制代码es6转es5
装置babel-loader
npm i babel-loader @babel/core @babel/preset-env -D
复制代码
module: {
rules: [
// ...其他配置
{
test: /\.js$/,
exclude:/node_modules/, // 除去 node_modules
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'] // 预设
}
}
},
]
复制代码复制代码完好代码download
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
function resolve(dir) {
return path.resolve(__dirname, dir)
}
module.exports = {
mode: 'development',
entry: './src/main.js',
output: {
path: __dirname + '/dist',
filename: 'static/js/[name].[contenthash].js',
clean: true,
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.scss$/i,
use: ['vue-style-loader', 'css-loader','sass-loader']
},
{
test: /\.css$/i,
use: ['vue-style-loader', 'css-loader'],
},
{
test: /\.(png|jpg|gif)$/i,
type: 'asset/resource',
generator: {
filename: 'static/img/[hash][ext][query]'
},
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
generator: {
filename: 'static/fonts/[hash][ext][query]'
},
},
],
},
plugins: [
// 请确保引入这个插件！
new VueLoaderPlugin(),
// new ProgressBarPlugin(), // 花里胡哨的进度条
new webpack.ProgressPlugin(), //打包进度报告
new HtmlWebpackPlugin({
template: './public/index.html'
})
],
devServer: {
static: './dist',
hot: true,
proxy: {
'/api': {
target: 'http://xxx.xxx',
changeOrigin: true
}
},
},
resolve: {
extensions: ['.js', '.json', '.vue', 'css'],
alias: {
'@': resolve('src')
}
},
}
作者：用户4556492016287
链接：https://juejin.cn/post/7051244067950166047