【黑马精品】Java架构师实战训练营

biancheng · · 14 次点击 · 开始浏览    置顶
### download[【黑马精品】Java架构师实战训练营](http://www.51xuebc.com/thread-340-1-1.html) webpack5简单搭建vue项目 写在前面 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项目 题外话 没学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配置 // 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代理 在开发环境中能够经过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'] // 预设 } } }, ] 复制代码 完好代码 // 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') } }, }

关注本站微信公众号(和以上内容无关)Debiancn ,扫码关注:DebianCN

14 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传