webpack 4.0搭建vue框架，入门学习

最新推荐文章于 2023-05-31 19:52:13 发布
最新推荐文章于 2023-05-31 19:52:13 发布
阅读量2.4k 收藏 8
点赞数 2
分类专栏： vue webpack 文章标签： vue webpack环境搭建
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36660558/article/details/81054334
版权

 俗话说一天不可以不学，今天就来学习一下，鼎鼎大名的webpack

      webpack的配置真的是让人发指的地步

   从这个坑中进入到另一个坑中，本篇文章可能有点长，请耐心看完

 

   众所周知，webpack是依附于node.js 的，所以在使用webpack之前需要先下载一个node，

     node中文网  点击打开链接

    安装完node之后，接下来就是今天的主角

      1 安装webpack

            打开命令窗口 执行  

             npm install webpack webpack-cli webpack-dev-server  -g

             这里建议大家使用cnpm

             cnpm install webpack webpack-cli webpack-dev-server  -g

       2  安装完成之后，你就可以小试一把

          创建文件结构如下

           src

                 index.js

           dist

                 index.html

        结构完成之后，在根目录下打开命令窗口，

         webpack4 提供了两个直接打包的方式分别是

               webpack  --mode=development      //用于开发环境    -》压缩出来的较大

               webpack --mode=production    //用于生产环境   -》压缩出来的较小

      执行完成之后，在dist文件夹中可以看到压缩过后的js

 

     3 使用 webpack.div.js

          上面的部分只是给咱们提供了一些简单的压缩js方式

          在实际的开发中，我们需要压缩css，html，lee等文件还是需要loader的配合，所以还是需要用到webpack.div.js

          下面开始webpack.div.js的配置，以及踩坑过程    

          一、先写出文件结构

                config

                     webpack.div.js 

                dist

                      index.html

                 src

                       main.js

二、配置压缩js的结构 

webpack.div.js                

    var path = require('path')    //node系统模块

module.exports = {         
entry: {
   main: './src/main.js'//入口文件
},       
mode: 'development',// 压缩模式
output: {  //输出配置
filename: '[name].js',    //输出名字配置【name】为原来的名字
path: path.resolve(__dirname, '../dist')   //输出的路径
}
}，
module: {
  rules：[
    //用来加载loader【loader是用来打包其他文件格式的】
   ]
}
}

三   loader配置

        css

                需要下载两个loader  

                          npm i css-loader style-loader

             在main中引入css  

                 require（./name.css） //一定加入./否则会报错

           loader配置       

 module: {
   rules: [{
     test: /\.css$/,
     use: [
      {
        loader: "style-loader"
      },
      {
        loader: "css-loader"
      }
    ]
     }]
}

     

           需要注意css 在HTML中的引入，需要output配合             

output: {
  filename: '[name].js',
  path: path.resolve(__dirname, '../dist'),
  publicPath: '/'
},

         在HTML中写入<script src="/main.js"></script>建议写到html下面引入

      HTML

            需要下载三个loader

                   npm i file-loader html-loader extract-loader 

             文件结构 

                          config 

                                   webpack.dev.js

                           dist

                           src

                                index.html

                                main.css

                                main.js

 

   config/webpack.dev.js 

                     

var path = require('path')  //node系统模块

module.exports = {  //暴露
entry: {   //入口文件
main: './src/main.js'
},
mode: 'development',  //开发模式 可使用production生产模式进行替换
output: {      //输出
filename: '[name].js',   //输出时文件名
path: path.resolve(__dirname, '../dist'),   //commonJs提供 文件名    -》输出路径
publicPath: '/'     //   html中的引入文件路径
},
devServer: {    //热跟新
contentBase: 'dist',    //服务器指向文件名。类似node中的静态资源加载
overlay:true //报错显示到浏览器
},
module: { //loader配置
rules: [{
test: /\.css$/,   // 正则css
use: [{
loader: "style-loader"   //渲染
},
{
loader: "css-loader"    //压缩
}
]
},
{
test: /\.html$/,  //正则 所有的html
use: [{
loader: "file-loader",  //文件输出
options: {  //名字
name: "[name].html"
}
},
{
loader: "extract-loader"  //与main.js分离，打包成一个独立的文件
},
{
loader: "html-loader",  //渲染，压缩
options: {
attrs: ["img:src"]
}
}
]
}

}

       

   src/index.html

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

</head>
<body>
<div id="box">

</div>
</body>
<script src="/main.js"></script>

</html>

    main/main.js代码         

requrie（'./main.css'）
requrie（'./html.css'）

   三，图片

         html中正常引入

        在loader配置中加入

{
test: /\.(jpg|git|png)$/,   //图片
use: [{
loader: "file-loader",
options: {
name: "[name]-[hash:8].[ext]"  //压缩为一个名字8位哈希值的图片
}
}]
}

   -----------------------------------------------------------------------------------------------------------

  以上属性webpack的基本操作，下面使用webpack实现vue开发环境的搭建

              文件结构

                    config

                             webpack.dev.js

                    dist

                              index.html

                    ser

                            main.js

                            app.vue

config/webpack.dev.js

           

var path = require('path')  //node系统模块
const VueLoaderPlugin = require('vue-loader/lib/plugin'); //vue-loader 伴生插件 
module.exports = {  //暴露
entry: {   //入口文件
main: './src/main.js'
},
mode: 'development',  //开发模式 可使用production生产模式进行替换
plugins: [
new VueLoaderPlugin()   //vue-loader的VueLoaderPlugin
],
output: {      //输出
filename: '[name].js',   //输出时文件名
path: path.resolve(__dirname, '../dist'),   //commonJs提供 文件名    -》输出路径
publicPath: '/'     //   html中的引入文件路径
},
devServer: {    //热跟新
contentBase: 'dist',    //服务器指向文件名。类似node中的静态资源加载
overlay:true //报错显示到浏览器
},
resolve: {    //引入vue.js
alias: {
'vue$': 'vue/dist/vue.js'
}
}, 
module: { //loader配置
rules: [{
test: /\.css$/,   // 正则css
use: [{
loader: "style-loader"   //渲染
},
{
loader: "css-loader"    //压缩
}
]
},
{
test: /\.html$/,  //正则 所有的html
use: [{
loader: "file-loader",  //文件输出
options: {  //名字
name: "[name].html"
}
},
{
loader: "extract-loader"  //与main.js分离，打包成一个独立的文件
},
{
loader: "html-loader",  //渲染，压缩
options: {
attrs: ["img:src"]
}
}
]
},
{
test: /\.(jpg|git|png)$/,   //图片
use: [{
loader: "file-loader",
options: {
name: "[name]-[hash:8].[ext]"  //压缩为一个名字8位哈希值的图片
}
}]
},
{
test: /\.vue$/,   //压缩vue
use: [{
loader: "vue-loader"  //压缩vue的loader
}],
exclude: '/node_modules/'    // 排除压缩的文件
}
]
}

}

           

dist/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

</head>
<body>
<div id="box">
<app></app>
</div>
</body>
<script src="/main.js"></script>

</html>

src/app.vue

<template>
<div>
我是{{a}}  
</div>
</template>


<script>
export default {
name: 'app',
data:function(){
return {
a:'小渣渣'
}
}
}
</script>


<style>

</style>

ser/main.js

 import Vue from 'vue'
 import app from "./app.vue"

new Vue({
   el:'#box',
    components:{
    app
    }
   }

)

 

github地址：https://github.com/wangchaogang/webpack-vue.git

 

 

小渣渣吧
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何搭建vue框架-1
weixin_43859439的博客
09-26 5719
基于vue2版本和vue-cli(脚手架)+elementUI进行的框架搭建。搭建之前需要安装所需要的环境和工具，个人推荐使用VSCode。
快速搭建Vue框架
Geosen_Jira的博客
04-21 2132
Vue框架搭建教程
Vue框架的学习与搭建
2301_76720304的博客
05-11 860
Vue是一个轻量且易于上手的JavaScript框架，被广泛用于Web开发中。Vue有非常强大的数据绑定和组件化能力，使得开发者可以更加方便地管理Web应用的状态和视图层。在本文中，我们将向您介绍如何学习和搭建Vue框架。
一个Vue项目框架的基本搭建
huangzhixin1996的博客
04-23 9639
一、 环境配置 1.安装Node.js 下载地址为: https://nodejs.org/en/ 以下操作都在命令行窗口进行 2.提高效率和下载速度，下载淘宝镜像：http://npm.taobao.org/ npm install -g cnpm –registry=https://registry.npm.taobao.org 即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。 3．使用npm安装vue的脚手架：npm install –g @vue/cli 二、 搭建项目 1.打
Vue的介绍以及环境搭建
Lucky的博客
05-31 9233
一、前言 Vue单页Web应用 Vue组件化开发 Node.js完成服务器功能 ElementUI有效实现界面 弹性盒子布局与SASS 二、Vue组件 1、全局注册组件 2、局部注册组件 三、Vue环境搭建 1.安装Vue的前置条件是安装node.js 2.安装vue脚手架 3.在visual studio code中新建vue项目 4.vue.js文件源代码的下载 三、Vue程序运行
基于webpack4.0搭建的vue多模块项目.zip
最新发布
10-21
基于webpack4.0搭建的vue多模块项目.zip
webpack4.0-:webpack 4.0 配置学习
04-28
webpack4.0 练习webpack只能操作js,其他不能操作的都必须转化，webpack是基于node来使用的。安装webpack首先包初始化 npm init,生成package.json安装node,版本>8webpack 除了正常安装webpack外，还需要安装webpack-...
vue2+webpack搭建h5框架
03-12
vue2+webpack搭建h5框架
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
01-19
批处理 前端现在在做项目的时候大多数遇到的都是单页面应用，但有时需要做多页面的时候，会把单页拿过来修改成多页面，如果代码多了，对单页或多页的配置可能会混乱，那么有没有更好的方式能把单页面和多页面不同的...
webpack4.0 入门实践教程
10-17
webpack4.0发布了一段时间了，这篇文章主要介绍了webpack4.0 入门实践教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【vue框架】 vue-cli从0开始搭建移动端vue项目框架（vscode版本）
我有满天星辰的博客
04-13 6465
github因为 rem 这个单位是要根据 html 的字号的变化而变化，那么html字号要如何才能变换呢？要么我们自己写媒体查询，根据不同的屏幕宽度给html设置不同的字号，但是这样就比较麻烦，因为移动端的屏幕特别多，要自己写媒体查询，就累到吐血，所以可以用别人写好的插件，自动根据屏幕大小来设置html的字号flexible 就是一种能根据屏幕自动设置html字号的插件。
Vue项目升级到Webpack 4.x初步踩坑总结
热门推荐
harsima的博客
06-26 2万+
Vue项目升级到Webpack 4.x初步踩坑总结，包括压缩JS/CSS，分离CSS/提取CSS到单独文件，分离Chunk，以及vue-loader 15.x版本的使用和基于vue项目的修改
Webpack 4.0 + Vue多页配置
切糕的技术博客
05-01 2639
Webpack 4.0 + Vue 的多页配置，注意 vue-loader 目前还请使用 14.2.2 版本，15版本在编译时会有问题。 package.json { "name": "learn", "version": "1.0.0", "description": "", "main": "index.js", &q
搭建vue框架（vue+webpack4.0+iview2.14+vuex+es6+stylus架构一）
一袋米要扛几楼_
07-28 6552
初始环境：npm+node CNPM: 如果安装速度过慢，请安装cnpm，然后将下列所有npm换成cnpm。命令行中输入：npm i -g cnpm --registry=https://registry.npm.taobao.org Vue新建项目： npm i -g vue vue-cli webpack -g 解释： 此命令用于安装vue的基础环境 i 表示instal
webpack4.0手动搭建vue教程
sun923873651的博客
09-25 306
webpack手动搭建vue项目 1.vue项目初始化 输入命令npm init，生成package.json文件 npm init 安装依赖 npm i webpack vue vue-loader
Vue——12——webpack使用（狂神系列）
dearand的博客
02-21 479
12——webpack使用 webpack就是把Es6规范的代码打包成ES5规范的代码运行 ES6规范可以在编写阶段报错，就是严格模式 什么是Webpack 本质上， webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler) 。当webpack处理应用程序时， 它会递归地构建一个依赖关系图(dependency graph) ， 其中包含应用程序需要的每个模块， 然后将所有这些模块打包成一个或多个bundle.   Webpack是当下最热门的前端资源模块化管
基于webpack4.0 搭建vue多模块系统
cxgasd的博客
03-14 2216
基于webpack4.0 搭建vue多模块系统。 当一个系统包含多个模块时，总不能每个模块开一个vue项目吧，做不到资源共用，通过改造webpack配置来聚合多个模块，达到资源共用的效果。 在config/index.js中配置相关的模块名，即可引入子模块，还可以指定打包的模块。 目录结构如图，modules文件夹下存放各个模块。 子模块文件夹如图 打完包之后的文件...
从零开始Webpack4.0+Vue3.0+iView3.0+Vuex环境搭建
weixin_33682719的博客
03-29 1356
项目地址:github.com/MrGaoGang/l… 先上效果图: 项目目录: npm init初始化npm的配置 npm install webpack --save-dev和npm install webpack-cli --save-dev :安装webpack依赖 npm install webpack-dev-server --save-dev ：可以在开发环境提供很多服务，...
创建一个vue项目框架
weixin_64948861的博客
02-24 249
提示：vue新版本与旧版本冲突。
webpack4 搭建 vue 项目
03-16
<title>My Vue.js好的，以下是使用webpack4搭建Vue项目的基本步骤： 1. 创建项目文件夹，并初始化为npm项目 ``` mkdir my-project cd my-project npm init -y ``` 2. 安装必要的依赖包 ``` npm install webpack ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值