超级详细的手写webpack4配置来启动vue2项目（附配置作用）

基础目录结构以及各个文件的作用

初始npm项目

npm init

一路回车，一律使用默认的npm项目配置

package.json修改scripts

如下：

{"name": "doing-a-webpack4-vue2-pro","version": "1.0.0","description": "超级详细的手写webpack4配置来启动vue2项目（附配置作用）","main": "index.js","author": "","license": "ISC","scripts": {"dev": "webpack-dev-server --config webpack/webpack.dev.config.js"},"engines": {"node": ">= 8.0.0","npm": ">= 3.0.0"},"browserslist": ["> 1%","last 2 versions","not ie <= 8"]
}

说明：
npm run dev 用来启动命令 webpack-dev-server --config webpack/webpack.dev.config.js
这里将开发环境(development)的配置 webpack/webpack-dev-config.js 传入到启动的server config中。详情
故这里需要做两件事情：
a. npm install webpack-dev-server -D 开发依赖
b. 书写 webpack.dev.config.js

书写 webpack.dev.config.js

说明：
由于 webpack.dev.config.js 与 webpack.prod.config.js 近似，所以手写一个 webpack.base.config.js来减少配置耦合量。
提示：base.config与dev.config需要用webpack提供的 webpack-merge 来合并
故这里需要做两件事情：
a. npm install webpack-merge -D 这个放到后面安装config需要的依赖中一起做，稍后会写到
b. 书写 webpack.base.config.js

书写 webpack.base.config.js

webpack/webpack.base.config.js

const path = require("path")
const { VueLoaderPlugin } = require('vue-loader')const ifProd = process.env.NODE_ENV === 'production' ? true : falseconst config = {dev: {mode: 'development',assetsPublcPath: '/',assetsSubDirectory: './'},prod: {mode: 'production',index: path.resolve(__dirname, "../dist/index.html"),assetsPublcPath: path.resolve(__dirname, "../dist"),assetsSubDirectory: './'}
}
module.exports = {mode: ifProd ? 'production' : 'development',context: path.resolve(__dirname, '../'),entry: {app: './src/main.js'},output: {filename: '[name].bulde.[hash:10].js',path: ifProd ? config.prod.assetsPublcPath : config.dev.assetsPublcPath},resolve: {extensions: ['.js', '.vue'],},devServer: {quiet: true},module: {rules: [{test: /\.vue$/,use: [{loader: 'vue-loader',}]},{test: /\.js$/,exclude: /node_modules/,loader: 'babel-loader',options: {presets: ['babel-preset-env']}},{test: /\.css$/,use: ['vue-style-loader', 'css-loader']}]},plugins: [new VueLoaderPlugin()]
}

我们可以看到，这里base.config需要的开发依赖有:
babel-loader@7 (7.x版本需要配合 babel-core babel-preset-env)
webpack (4.x版本需要配合 webpack-cli)
css-loader (需要配合 vue-style-loader)
vue-loader (需要配合 vue-template-compiler)
故在命令行执行如下命令
npm install -D babel-loader@7 babel-core babel-preset-env webpack webpack-cli
npm install -D css-loader vue-style-loader vue-loader vue-template-compiler
详细的配置说明解释几天后给出

回到 webpack.dev.config.js

webpack/webpack.dev.config.js

const BaseConfig = require("./webpack.base.config")const merge = require("webpack-merge")
const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = merge(BaseConfig, {plugins: [// https://github.com/ampedandwired/html-webpack-plugin// 这是一个webpack的插件来创建html文件渲染你的webpack生成的bundlenew HtmlWebpackPlugin({// 写入bundle的那个index.htmlfilename: 'index.html',template: 'index.html'})]
})

我们可以看到，这里dev.config需要的开发依赖有:
webpack-merge (前面提到的用来将dev.config和base.config合并的依赖)
html-webpack-plugin
故在命令行执行如下命令
npm install -D html-webpack-plugin webpack-merge

可以开始写vue啦！

src/main.js

我们在上面的 webpack.base.config.js 中写到了 entry: {app: './src/main.js'}
这就是我们的vue入口了。如下:

import Vue from "vue"; // 引入vue
import App from "./App"; // 引入组件Appnew Vue ({el: '#app', // 挂载到index.html中的#app上render: h => h (App) // 用App.vue渲染
})

src/App.vue

简单的一个首页

<template><div><h1>Success</h1></div>
</template>
<style>h1 {background: #FAFBBB}
</style>

如上，我们需要引入vue，所以：
npm install vue -S (自动安装2.x版本的vue)

最后

代码结构:

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="icon" href="#" type="image/x-icon"><title>doing</title></head><body><div id="app"></div></body>
</html>

运行项目

npm run dev

源码地址

具体的项目源码地址：https://github.com/Sotyoyo/do...
源码与本文章稍有出入，后期会做到统一，希望给个star支持一下！

超级详细的手写webpack4配置来启动vue2项目（附配置作用）相关推荐

我的Windows Terminal 配置（带注释，附配置文件下载）
Windows Terminal 配置(带注释,附配置文件下载,更新于2020.5.3) 前言详细配置(更新于2020.05.03) 前言 windows terminal的确是好用之极的终端工具, ...
超级详细找CALL写CALL教程[转]
首先我们要知道一点,为什么要找CALL.CALL是什么?大家知道易里的子程序吧如何调用子程序的?这里的CALL就是调用子程序的意思,那问了为什么要找他的,答案是:当你些个游戏的外挂用模拟键盘操作的时候 ...
手写Spring-第五章-解放双手！自动化配置！
前言上次我们完成了Bean之间依赖的注入.但在最后测试的时候,吃到了苦头.Bean定义的构建太麻烦了>_<!而且现在的Bean定义还只有class和属性两个内容,如果以后再继续扩充,想必 ...
阿里微服务专家自己手写Spring Boot 实现一个简单的自动配置模块
为了更好的理解 Spring Boot 的自动配置和工作原理,我们自己来实现一个简单的自动配置模块. 假设,现在项目需要一个功能,需要自动记录项目发布者的相关信息,我们如何通过 Spring Boo ...
独家 | 如何从头开始为MNIST手写数字分类建立卷积神经网络（附代码）
翻译:张睿毅校对:吴金笛本文约9300字,建议阅读20分钟. 本文章逐步介绍了卷积神经网络的建模过程,最终实现了MNIST手写数字分类. MNIST手写数字分类问题是计算机视觉和深度学习中使用的标 ...
再也不怕罚抄写文章了？用Python模拟手写字体，制作手写模拟器，从此摆脱手写苦恼（无需网络接口）【附资源】
目录前言功能和介绍 1. 界面样式 2. 支持文件提取 3. 转换后的效果资源下载前言某天在B站上看到一个有意思的视屏:https://www.bilibili.com/video/BV1P ...
【超级详细教程】IntelliJ IDEA 从入门到上瘾，常用配置、插件、多光标操作、快捷键。
本文共计 1.5 W 字,80 张图介绍 IDEA 中令人相见恨晚的技巧,本文中从入门.简单项目创建开始,介绍 IDEA 中多光标操作.常用配置.插件.版本控制等等.一定包含你在别的文章没有看到的内容 ...
idea配置tomcat启动web项目
配置tomcat 1.点击run configuration 2.选择tomcat local 3.配置tomcat 4.部署web项目部署有2种方式 war包:打成war置于服务器运行,这种方式我 ...
maven配置自动部署到服务器上,jenkins+svn+maven安装配置并自动化部署成功(超级详细)...
jenkins+svn+maven安装配置并自动化部署成功(超级详细) jenkins+svn+maven安装配置并自动化部署成功(超级详细) 简言写这篇博客的原因是因为每次部署服务器的流程都是在做 ...

超级详细的手写webpack4配置来启动vue2项目（附配置作用）

基础目录结构以及各个文件的作用

初始npm项目

npm init

package.json修改scripts

书写 webpack.dev.config.js

书写 webpack.base.config.js

webpack/webpack.base.config.js

回到 webpack.dev.config.js

webpack/webpack.dev.config.js

可以开始写vue啦！

src/main.js

src/App.vue

最后

代码结构:

index.html

运行项目

源码地址

超级详细的手写webpack4配置来启动vue2项目（附配置作用）相关推荐

最新文章

热门文章