标签：style vue loader webpack webpack4 新手 js css
起步阶段 使用webpack4.x构建vue的开发环境
导读
首先呢，我们在这章节呢，我将手把手带着大家使用webpack4.x搭建一个vue的开发环境，这里有的同学可能就会问了？
“有现成的类似于vue-cli的webpack脚手架工具，为什么我们还要自己在造轮子呢？” 在这里呢，我将对这个问题做出回答：
- 同样是前端开发，看着别人拿着高薪，你心动吗？
- 开发或打包过程中遇到问题，需要修改脚手架配置，你还想依旧手足无措吗？
- 看着
webpack成千上万的配置，是否还想经历那种头昏脑涨的辛酸史吗？ - 目前在市面找不到当前项目所需要的脚手架，你还想经历那样的彷徨无助吗？
- 省略1万字 …
安装依赖
“工欲善其事 必先利其器” 面对复杂的项目需求，或者构建需求，使用第三方的包文件，是非常方便的；hao ~ , 我们接下来呢，就需要安装我们构建vue项目的基本的loader等配置，好，我们依次安装：( 这里有个前置条件，千万别告诉我你的PC里没有node,npm；好吧，可能有的皮皮虾同学真没有，这里提供下载地址：https://nodejs.org/en/download/ ，伸手党的福利哟 ~ ~ )
- 我们需要创建我们的项目开发目录
md webpack-vue && cd webpack-vue
- 安装
webpack到我们的项目中
cnpm install -D webpack webpack-cli
- 引入我们需要的第三方的
package.json依赖包和loader
# 安装 vue ，这个没啥疑议吧 ^_^
cnpm install -S vue
# vue-loader是必须的，vue-template-compiler是vue-loader必须的依赖
cnpm install -D vue-loader vue-template-compiler
# 安装 babel ，将ES6 -> ES5
npm install -D @babel/core @babel/preset-env @babel/plugin-transform-runtime babel-loader
# css加载器css-loader style-loader转换器, style-loader会把css转成js的，小朋友们 ~
cnpm install -D css-loader style-loader
# 图片等资源加载器
cnpm install -D file-loader url-loader
# 安装css预处理器 这里以 less为案例
cnpm install -D less-loader less
配置
安装好相关的我们需要的模块之后呢，我们就需要在webpack.config.js中把这些模块按照一定的方式配置好，然后才能正常的启动项目
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
mode: 'development',
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].bundle.js'
},
module:{
rules: [{
test:/\.js$/,
loader: 'babel-loader',
exclude:/node_modules/
},{
test:/\.css$/,
use:[ 'style-loader', 'css-loader']
},
//...... 太长了 省略一部分
{
test:/\.less$/,
use:[ 'vue-style-loader', 'css-loader', 'less-loader' ]
},
{
test:/\.vue$/,
loader:'vue-loader',
options:{
loaders: {
'less': [ 'vue-style-loader', 'css-loader', 'less-loader']
}
}
}]
},
resolve:{
//...... 太长了 省略一部分
},
plugins:[
new VueLoaderPlugin()
]
}
目录结构
配置好我们的webpack.config.js文件后，我们接下来就可以来梳理项目目录结构了，目录结构如下：
| App.vue
| index.js
| main.js
|
+---assets
| logo.jpg
|
\---style
main.css
App.vue
<template>
<div id="app">
<img :src="require('@/assets/logo.jpg')" />
<span>{{msg}}</span>
<p class="test">Test Text</p>
</div>
</template>
<script scoped>
export default {
name: 'App',
data(){
return {
msg: 'Vue Webpack Logo'
}
},
created(){},
mounted(){},
components: {}
}
</script>
<style scoped lang="less">
#app{
img { width:100px; height:100px; }
.test{
color:red;
}
}
</style>
main.js
import Vue from 'vue'
import './style/main.css'
import App from './App.vue'
new Vue({
el:"#app",
template:'<App/>',
components:{App}
})
hao ~ , 到这里呢，我们的vue项目，已经可以启动了，然后呢，我们就可以继续构建我们的脚手架工具，让它支持更多的特性，满足多条件下的使用。
标签：style,vue,loader,webpack,webpack4,新手,js,css 来源： https://blog.csdn.net/WU5229485/article/details/99719657
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。