webpack4手动搭建Vue开发环境实现todoList项目
栏目: JavaScript · 发布时间: 5年前
内容简介:平常在工作开发中,为了效率我们通常都会直接使用Vue-cli脚手架去搭建Vue开发环境,确实这种工具是节省了我们不少时间,但是你有没有想过Vue开发环境是如何搭建起来的?还有如果是你自己动手去搭建,能顺利搭建起来吗?基于这些想法,我就捣鼓了一下webpack4,并且弄下来了这个小项目,感觉一个小项目下来收货还是挺大的,所以就写一遍文章,分享心得,哈哈!!基于个人的时间精力问题,把本项目教程分为两部分:
平常在工作开发中,为了效率我们通常都会直接使用Vue-cli脚手架去搭建Vue开发环境,确实这种 工具 是节省了我们不少时间,但是你有没有想过Vue开发环境是如何搭建起来的?还有如果是你自己动手去搭建,能顺利搭建起来吗?
基于这些想法,我就捣鼓了一下webpack4,并且弄下来了这个小项目,感觉一个小项目下来收货还是挺大的,所以就写一遍文章,分享心得,哈哈!!
基于个人的时间精力问题,把本项目教程分为两部分:
- webpack4手动搭建Vue开发环境 (本篇文章)
- 手动搭建Vue项目文件夹实现todoList (包括Vue全家桶)
希望你能把教程看完,并且能收货到你想要的东西,嘻嘻,好了,开始!!
一、搭建webpack运行环境
鉴于文章篇幅的长度,本教程不会详细讲述webpack4的知识点,如果对搭建步骤有什么疑惑的或者有知识点看不懂的,可以先自行Google搜索一下,我悄悄跟你说,webpack4还是有很多坑的,但是所谓的进步就是不断不断地踩坑(捂脸表情)!!
初始化项目
在命令行中运行 npm init -y
初始化项目,生产 package.json
文件
安装webpack依赖
npm i webpack webpack-cli --save-dev
基本项目目录搭建
webpack.base.dev.js基本配置
修改脚本命令
在修改 package.json
文件里的 scripts
配置
运行webpack
在 main.js
里面输入 document.write("Hello World")
根据上述图片配置 webpack.base.dev.js
文件
在命令行中运行 npm run test
命令,dist文件夹里会有js文件生成
在 index.html
引入,若成功输出 Hello World
即证明webpack运行环境配置成功...
二、开始搭建Vue环境
Vue运行环境分为开发环境和生产环境,不同的环境对功能的实现要求也是不一样的,比如生产环境需要压缩代码,而开发环境需要sourceMap便于调试,而这两种环境也有公共的配置!!
接下来在下面我会慢慢讲述不同环境需要实现的功能
在build里面新建文件
webpack.base.conf.js webpack.dev.conf.js webpack.prod.conf.js
公共配置文件
webpack.base.conf.js
是公共配置文件,需要实现以下功能 :
- 字体处理
- 处理图片以及优化
- 识别Vue文件
- 启用babel转码,把ES6转换ES5代码
- 音乐文件处理
- 配置打包后的html模板
- 配置resolve模块解析
在 package.json
文件里面 scripts
配置运行脚本命令 :
"test":"webpack --config build/webpack.base.conf.js"
在命令行上运行 npm run test
即可运行 webpack.base.conf.js
配置文件
开发环境配置文件
webpack.dev.conf.js
是开发环境配置文件,该环境注重调试效率:
postcss-loader
在 package.json
文件里面 scripts
配置运行脚本命令 :
"dev":"cross-env NODE_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
在命令行上运行 npm run dev
即可运行 webpack.dev.conf.js
配置文件
生产环境配置文件
webpack.prod.conf.js
是生产环境配置文件,该环境注重压缩代码和性能:
mini-css-extract-plugin postcss-loader clean-webpack-plugin optimize-css-assets-webpack-plugin terser-webpack-plugin
在 package.json
文件里面 scripts
配置运行脚本命令 :
"build":"cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js"
在命令行上运行 npm run build
即可运行 webpack.prod.conf.js
配置文件
三、搭建公共配置文件功能
上面把三个配置文件需要实现的功能都列举出来了,现在只要按着功能去搭建、去配置就好了,好了,开始!!
在 webpack.base.conf.js
里面开始公共配置功能
配置处理字体、图片、音乐功能
处理字体、图片和音乐需要安装相关依赖
npm i url-loader file-loader --save-dev
配置代码如下
const path = require('path'); module.exports = { entry: path.resolve(__dirname, '../src/main.js'), output: { filename: 'js/[name].[hash:5].js', path: path.resolve(__dirname, '../dist'), publicPath: './' }, module: { rules: [ { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, use: [{ loader: 'url-loader', options: { limit: 10000, name: 'img/[name]-[hash:5].[ext]', } } ] }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: 'fonts/[name]-[hash:5].[ext]', } }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, use: [ { loader: 'url-loader', options: { limit: 4096, name: 'media/[name]-[hash:5].[ext]', } } ] } ] }, } 复制代码
url-loader
和 file-loader
功能相似,都是在webpack中处理图片、字体图标等文件
它们之间的关系是 url-loader
封装了 file-loader
,但 url-loader
并不依赖于file-loader
url-loader
可以通过limit属性对图片分情况处理,当图片小于limit(单位:byte)大小时转base64,大于limit时调用 file-loader
对图片进行处理。
ES6转换ES5代码
在这里我吐一下苦水,在学习使用babel配置ES6转换代码的时候,真的费了很大的心思,配置了很久,很多loader我都搞不清楚是什么关系(捂脸),后来看了官网和别人的博客才分清楚了~~~好了,开始!!
首先要安装相关loader
npm i babel-loader @babel/core @babel/polyfill @babel/preset-env core-js@3 --save-dev
babel-loader babel-polyfill babel-preset-env babel-core
看配置代码
这样子配置只支持ES6语法转换,不支持ES6新增加API
在入口文件 main.js
里面添加 import @babel/polyfill
这样子就可以使用ES6新增加的API了,但是这是你会发现打包后的JS文件比较大,而且里面有很多ES6的API也是你没用到的,所以这时候你需要做到按需引入
在根目录下创建 babel.config.js
文件,在里面设置配置
好了,这样就可以实现按需引入了,可以大大减少打包后的JS文件大小了,嗯嗯,我也终于把知识点整理出来了(捂脸)(辛酸脸)~~~
配置打包Vue文件
首先先安装依赖
npm i vue vue-loader vue-template-compiler --save-dev
在 src
文件夹上新建Vue文件 App.vue
在 main.js
入口文件上引入Vue并且挂载到节点上
好了,开始打包Vue文件的配置
这样就好了,感觉打包Vue以及挂载节点这段代码手敲出来还是挺有感觉的
配置html模板页面
安装依赖
npm i html-webpack-plugin --save-dev
使用 html-webpack-plugin来创建html页面,并自动引入打包生成的文件
const HtmlWebpackPlugin = require('html-webpack-plugin'); plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname,'../index.html'), filename: 'index.html' }), ] 复制代码
具体配置可以查看npm文档
www.npmjs.com/package/htm…
配置resolve模块解析
配置alias方便路径的检索效率以及配置文件默认扩展名
resolve: { extensions: ['.js','.json','.vue'], alias: { '@': path.resolve(__dirname,'../src') } } 复制代码
"@":"指向src文件夹"
好了,到这里为止,已经完成了配置文件的公共部分了,接下来开始针对环境进行配置了!!!
在命令行上运行 npm run test
,可以运行公共配置文件
四、生产环境配置
好了,直接开敲!!!
在 webpack.prod.conf.js
文件里面进行配置
定义环境变量
webpack里面提供了 DefinePlugin
插件可以方便定义环境变量
plugins: [ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('production') } }), ], 复制代码
处理css和less文件
生产环境处理css和less文件需要把css样式提取出来到一个独立的css文件里面
并且自动添加前缀,sourceMap
处理css和less文件
npm i css-loader less less-loader --save-dev
自动添加前缀
npm i postcss-loader autoprefixer --save-dev
提取css样式到独立css文件
npm i mini-css-extract-plugin --save-dev
篇幅过长,无法截图,直接上代码
const webpackConfig = require('./webpack.base.conf'); const merge = require('webpack-merge'); const webpack = require('webpack'); //抽离CSS样式 const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = merge(webpackConfig,{ mode: 'production', devtool: 'cheap-source-map', module: { rules: [ { test: /\.(c|le)ss$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' } }, { loader: 'css-loader' }, { loader: 'postcss-loader', options: { ident: 'postcss', sourceMap: true, plugins: loader=>[ require('autoprefixer')({ browsers: [ "last 2 versions", "> 1%" ] }) ] } }, { loader: 'less-loader' } ] } ] }, plugins: [ new MiniCssExtractPlugin({ filename: 'css/[name]-[hash:5].css', chunkFilename: 'css/[id]-[hash:5].css', }), ], } 复制代码
清理打包创建文件夹
打包过程中你会发现每次打包后dist文件夹都会不断增加文件, 显然这个方面我们需要处理
安装相关依赖
npm i clean-webpack-plugin --save-dev
//清理dist const CleanWebpackPlugin = require('clean-webpack-plugin'); plugins: [ new CleanWebpackPlugin(), ], 复制代码
压缩js和css代码
压缩css代码
npm i optimize-css-assets-webpack-plugin --save-dev
压缩js代码
npm i terser-webpack-plugin --save-dev
使用方式
optimization: { minimizer: [ //压缩css new OptimizeCssAssetsWebpackPlugin({}), // 压缩JS new TerserWebpackPlugin({ cache: true, parallel: true, sourceMap: true, }), //具体更多配置可以查看官网 ] } 复制代码
在命令行上运行 npm run build
可以运行开发环境配置文件
好了,说完开发环境的配置,接下来到生产环境的配置了
五、开发环境配置
在 webpack.dev.conf.js
文件里面进行配置
有点小累(捂脸)
定义环境变量
跟生产环境一样,首先也是要定义环境变量
new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('development') } }), 复制代码
处理css和less文件
开发环境下的css和less不需要提取样式,只需要添加前缀和sourceMap方便调试
安装依赖
处理css和less文件
npm i style-loader css-loader less less-loader --save-dev
自动添加前缀
npm i postcss-loader autoprefixer --save-dev
const webpackConfig = require('./webpack.base.conf.js'); const merge = require('webpack-merge'); const path = require('path'); const webpack = require('webpack'); module.exports = merge(webpackConfig,{ mode: 'development', // source-map,将编译后的代码映射到原代码,便于报错后定位错误 devtool: 'inline-source-map', module: { rules: [ { test: /\.(c|le)ss$/, use: [ { loader: 'style-loader', options: { sourceMap: true } }, { loader: 'css-loader', options: { sourceMap: true, } }, { loader: 'postcss-loader', options: { ident: 'postcss', sourceMap: true, plugins: loader=>[ require('autoprefixer')({ browsers: [ "last 2 versions", "> 1%" ] }) ] } }, { loader: 'less-loader', options: { sourceMap: true } } ] } ] }, } 复制代码
配置devServer
webpack上可以开启热更新模式,大大加速开大效率。
安装相关依赖
npm i webpack-dev-server --save-dev
上代码
//具体更多配置可以参考官网 devServer: { contentBase: path.resolve(__dirname,'../dist'), // hot: true, port: 9090, overlay: { warnings: true, errors: true }, publicPath: '/' } plugins: [ // 启用模块热替换(HMR) new webpack.HotModuleReplacementPlugin(), // 当开启 HMR 的时候使用该插件会显示模块的相对路径,建议用于开发环境。 new webpack.NamedModulesPlugin(), ], 复制代码
这样子就可以在线调试,无需手动刷新了!!嘻嘻
好了,开发环境的配置也完成了
在命令行上输入 npm run dev
可以运行生产环境配置文件
六、总结
整个Vue开发环境配置下来,感觉学到的东西还是挺多的,对webpack4功能的配置也有了大致的认识
虽然跟Vue-cli相比还是差太远,但是有时候弄点小东西折腾一下感觉还是不错的!!
好了,本编文章就到此为止,由于本人水平有限,如果有什么错误,请及时指出,彼此好好进步,哈哈!!谢谢各位大佬(笑脸)
下篇文章我将用这次搭建的Vue开发环境去编写 todoList 项目
我相信大家对todoList并不陌生,但是同一个项目可以有不同的写法的,所以下篇文章我也会继续手动搭建Vue文件夹,纯手写,用 vue-router
. vuex
来实现,相信会对大家有帮助,好了,结束!!
github源码: github.com/Zero-jian/w…
下篇文章 手动搭建Vue项目 ,未完待续~~~
以上所述就是小编给大家介绍的《webpack4手动搭建Vue开发环境实现todoList项目》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- webpack手动搭建Vue项目
- webpack手动搭建React项目
- 手动搭建Docker本地私有镜像仓库
- iOS手动编译并搭建FFmpeg
- webpack4手动搭建Vue开发环境实现todoList项目(2)
- 手动升级Coreos版本
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
人工智能的未来
Jeff Hawkins、Sandra Blakeslee / 贺俊杰、李若子、杨倩 / 陕西科学技术出版社 / 2006.1 / 18.5
陕西科技出版社最新引进美国图书《人工智能的未来》(On Intelligence)一书,是由杰夫•霍金斯,一位在硅谷极其成功、受人尊敬的计算机工程师、企业家与桑德拉•布拉克斯莉,《纽约日报》的栏目作家共同撰写。本书对人类大脑皮层所具有的知觉、认识、行为和智能功能新理论提出了新的理论构想。这一理论的独到之处在于对大脑皮层的现行认识提出了新的观点,对大脑的工作原理,即霍金斯称之为“真正智能”而非计算机......一起来看看 《人工智能的未来》 这本书的介绍吧!