深度实战玩转算法

深度实战玩转算法

深度实战玩转算法

webpack5简单搭建vue项目​​​​

​写在前面

​​webpack​​在当今的前端范畴曾经是不可缺失的一局部了，不多说了，先理解一下​​webpack​​的四大中心

entry（入口）

​​entry​​是一切的起点，经过​​import​​通知​​webpack​​援用了哪些模块

// index.jsimport module from './module'import './index.css'import './index.scss'module()console.log(2222)复制代码

loader

假如将非js文件当作模块援用进来的时分，​​webpack​​是不具备转换非js文件的，这时能够经过​​loader​​把​​css​​,​​scss​​停止转换，​​loader​​是从下到上，从右到左编译的

// webpack.config.jsmodule.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 (出口)

望文生义就是打包后导出的文件在哪​​download​​

好了 根本的理解就到这 如今我们能够​​从0搭建一个vue项目​​

从0搭建一个vue项目

题外话

没学​​webpack​​之前，就在想​​vue​​是怎样打包的，入口文件只要一个​​main.js​​,而且单文件里面的​​js​​,​​css​​是如何获取的，学了之后才发现原来有个​​vue-loader​​这个中心，​​vue​​文件的编译都是基于这个中心

初始化项目

// 初始化项目 创立一个package.jsonnpm init -y // 装置webpacknpm i webpack webpack -D// 创立一个html模板mkdir public && cd public// 寄存开发文件mkdir src && cd src复制代码

目录构造如下

├── public # 静态资源│ └── index.html # html模板├── src |—— main.js # webpack入口文件复制代码

新建webpack.config.js

先配置一些根本的东西​​download​​

// 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复制代码

配置​​download​​

// webpack.config.jsconst { 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​​配置

// webpack.config.jsmodule.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​​​​download​​这种文件途径的需求设置别名

resolve: { alias: { '@': resolve('src') } }复制代码

extensions省略文件途径

经过​​extensions​​能够不用写文件后缀

resolve: { // ...其他配置 extensions: ['.js', '.json', '.vue', 'css'] }复制代码

proxy代理

在开发环境中能够经过​​proxy​​处置跨域

devServer: { // ...其他配置 proxy: { '/api': { target: ' 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'] // 预设 } } }, ]复制代码

完好代码

// webpack.config.jsconst 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: ' changeOrigin: true } }, }, resolve: { extensions: ['.js', '.json', '.vue', 'css'], alias: { '@': resolve('src') } }, }

​​download​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。