摘要

vue本身提供了一个脚手架，vue-cli，直接就可以使用，一般不需要从零去构建一个webpack打包机制，但是作为一个前端开发，基础的还是需要了解和知道，万一和我一样不像用vue的打包配置呢？掌握基础的想怎弄就怎么弄，顺便在了解一下webpack的打包机制。

安装和检查

确保已经安装了node，webpack是依托node环境，并且使用npm管理，因此要确保安装了node，npm是集合在node里面一般不用单独安装，如果要升级就升级一下
检查安装

node -v
v12.12.0
npm -v
6.11.3

如果没有安装就安装

项目初始化

新建一个项目目录，用来存放开发代码，打包代码等等
新建 vuepluginLearn 目录, （名字随便起）

初始化项目package.json

npm init -y

生成了package.json文件，可以打开看看。先放着，等会在用
安装 webpack vue

npm install webpack --save-dev

安装 vue

npm install vue

其他的安装用到的时候在安装

新建一个html

在更目录下新建一个index.html 文件。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>木子聊前端</title></title><meta name="description" content="提供0到1到基础前端学习，实战层层深入,有问题咨询v:chinaynlmq"><meta name="keywords" content="前端,javascript,html5"></head><body><!-- ---></body>
</html>

是一个空的，先不用，后面引入js在用

新建webpack配置文件

在根目录下新建 webpack.config.js

const path = require('path');  // node自带包
const webpack = require('webpack');
module.exports = {}

新建开发目录

在根目录下新家一个src目录
在src目录里面新建一个app.vue , 这个其实是一个模板
app.vue

<template><div class="single">{{massage}}</div>
</template>
<script>
export default {data() {return {massage:'单文件打包'}},created() {},methods: {},
}
</script>
<style lang='less'>.single{color: red;}
</style>

在src 目录下新建 main.js

import Vue from 'vue';
import App from 'app.vue';new Vue({el: '#app',template: '<App/>',components: { App }
})

项目初始化工作已经基本昨完，但是还运行不起来，别慌，接下来我们填充webpack，让它运行起来

完善配置文件让项目运行起来

完善 webpack.config.js

配置输入输出路径

module.exports = {entry:'./src/main.js', // 打包的输入路径output: {path:path.resolve(__dirname,'./dist'),filename:'build.js'}
}

webpack 的原则一切皆模块而且只支持js模块，因此还要继续配置，把不是模块的进行模块，该转化的转化
css，less 的模块配置，需要先安装相关插件

npm install css-loader less-loader vue-style-loader --save-dev

样式配置 在module.rules 里面配置，这是一个数组

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

意思是查找 .css 文件的后缀，然后用 vue-style-loader 解析，在用css-loader去解析，其他的原理一样

vue 模版配置
安装

npm i vue-loader vue-template-compiler --save-dev

这个有点特殊需要在和样式配置的基础上添加loader

    {test: /\.vue$/,loader:'vue-loader',options:{loaders: {'less': ['vue-style-loader','css-loader','less-loader']}}}

webpack配置基本完善了。不够的在添加

修改 package.json

修改scripts 告诉npm 运行时候该干嘛

"scripts": {"dev": "webpack --config webpack.config.js --progress","test": "echo \"Error: no test specified\" && exit 1"},

–config webpack.config.js --progress
可以不写。默认就是这个文件，这里是可配置webpack.config.js 路径的。意思是如果不在根目录下就需要配置，比如 src/webpack.config.js 比如我们放着src目录下吗就需要指明
运行一下

npm run dev

运行出错提示没有安装webpack-cli ，那就安装一下

npm install webpack-cli -D

在运行又报错
Module Error (from ./node_modules/vue-loader/lib/index.js): vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
不慌，来看一下意思是 vue-loader 没有被使用，确认一下是否在 webpack 的配置文件里面使用了，VueLoaderPlugin。
这个插件有点特殊来在完善一下webpack配置，同时补充resolve的配置
引入这个插件

const VueLoaderPlugin = require('vue-loader/lib/plugin');

然后

module:{// 上面的配置省略},plugins:[new VueLoaderPlugin()  ],resolve: {extensions: ['.vue', '.js', '.css', '.json'],alias: {'vue$': 'vue/dist/vue.esm.js'}}

添加这个插件进去。
在来 npm run dev
终于运行成功。看到更目录下存在了 dist/build.js 这个就是我们打包好的js

修改index.html

加入打包好的js

<div id="app"></div><script src="./dist/build.js"></script>

浏览器运行 index.html 运行成功
后续继续补充其他优化，包括浏览器不支持es6语法的的问题

webpack 之vue 初级打包1 从零开始相关推荐

webpack 之vue 初级打包2 从零开始
接上一篇<webpack 之vue 初级打包1 > 到目前位置vue第一个页面已经可以正常运行了,其中还有一些地方可以更加方便快捷.期待更加智能更加快速.依据webpack给出到原则一切皆 ...
从零开始使用webpack 搭建vue项目
从零开始使用webpack 搭建vue项目 1 创建项目 npm init 生成 package.json 创建 index.html webpack.confug.js project-name|- ...
从零开始搭建webpack的vue生产/开发环境
一.初始化项目在命令行中敲入如下命令: mkdir Webpack-Vue && cd Webpack-Vue && npm init -y 然后你就可以在你的当前路 ...
vue html引入资源dev下404,webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)...
最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下一.首先修改c ...
vue 项目打包后浏览器 F12 在source 下不显示 webpack 包
vue 项目打包后浏览器 F12 在source 下不显示 webpack 包,度娘上好多说的是在 vue.config.js 配置 productionSourceMap: false 即可,然 ...
Webpack配置vue打包环境时报错
Webpack配置vue打包环境时报错,大片飘红头都大了- ERROR in ./src/App.vue Module build failed (from ./node_modules/_vue- ...
Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决
vue+webpack创建的项目打包发布至服务器,页面空白及背景图片不显示问题解决一. 页面显示空白二. 背景图片不显示一. 页面显示空白解决方法: config > index.js ...
vue的router部署从零开始
vue的router部署从零开始先建立项目 vue init webpack learnvuerouter 通过映射表转化一些信息传达前端渲染,后端渲染(100)https://www.bilib ...
webpack配置vue组件加载器
前言 App.vue单文件组件代码 <template><div><h1>App根组件</h1></div> </template&g ...

webpack 之vue 初级打包1 从零开始

摘要

安装和检查

项目初始化

初始化项目package.json

新建一个html

新建webpack配置文件

新建开发目录

完善配置文件让项目运行起来

完善 webpack.config.js

修改 package.json

修改index.html

webpack 之vue 初级打包1 从零开始相关推荐

最新文章

热门文章

webpack 之vue 初级打包1 从零开始

摘要

安装 和检查

项目初始化

初始化项目package.json

新建一个html

新建webpack配置文件

新建开发目录

完善配置文件让项目运行起来

完善 webpack.config.js

修改 package.json

修改index.html

webpack 之vue 初级打包1 从零开始相关推荐

最新文章

热门文章

安装和检查