创建目录

项目名称: vue-init

app

├─css

│ reset.scss



├─js

│ │ App.vue

│ │ main.js

│ │

│ ├─home

│ │ index.vue

│ │

│ └─router

│ index.js



└─views

index.html

安装webpack

npm i -D webpack

创建配置文件

webpack.config.js

基础配置

  • entry 入口
  • module 模块
  • plugins 插件
  • output 输出

进阶配置

  • resolve
  • devtool
  • devServer
  • ...

基础配置

步骤

先写好基本结构

module.exports = {
enter: {},
module: {},
plugins: [],
output: {}
}

配置入口文件,以main.js作为打包入口文件

    enter: {
app: './app/js/main.js'
}

配置module,里面主要配置使用的各种loader

   module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: 'html-loader'
}
]
},
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader'
}
]
},
{
test: /\.scss$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
module: true
}
},
{ loader: 'sass-loader' },
]
},
]
},
  • test 的值为正册表达式,配对文件后缀,表示什么文件对应的loader
  • sass 需要使用多个loader,解析顺序是从右向左
  • options: { module: true } 开启css module

稍后再配置plugins,先配置output

//在webpack.config.js顶部引入path
const path = require('path');
    output: {
filename: '[name].min.js',
path: path.resolve(_dirname, 'dist')
}
}
  • filename表示打包后输出的文件名
  • [name] 对应 enter.app的值
  • path 打包输出的路径
  • path.resolve() webpack的执行环境是node,这里的path是node里的一个对象,用于处理文件路径和目录路径

配置好了 我们开始安装loaders

npm i -D html-loader vue-loader style-loader css-loader sass-loader

如果有loader安装不成功请再单个安装它,或者换用cnpm

基础配置代码

到这一步我们的基础配置已经做好,代码如下:

module.exports = {
enter: {
app: './app/js/main.js'
},
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: 'html-loader'
}
]
},
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader'
}
]
},
{
test: /\.scss$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
module: true
}
},
{ loader: 'sass-loader' },
]
},
]
},
plugins: [],
output: {
filename: '[name].min.js',
path: path.resolve(_dirname, 'dist')
}
}

进阶配置

devServer

  devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
  • contentBase 告诉服务器从哪个目录中提供内容。
  • compress 压缩
  • port 启动端口号

配置好了 我们开始安装它

npm i -D webpack-dev-server

测试

添加一些代码以供测试

home/index.vue

<template>
<div id="home">
<h1>首页</h1>
<p>123123<p>
</div>
</template> <script>
export default {}
</script> <style lang="scss" scoped>
.home {
color: red;
font-size: 80px;
p {
color: blue
}
}
</style>

router/index.js

import Vue from "vue"
import Router from "vue-router"
import Home from "../home/index.vue" Vue.use(Router); export default new Router({
routes: [{
path: '/',
name: 'home',
component: Home
}]
})

App.vue

<template>
<div id="app">
<router-view></router-view>
</div>
</template> <script>
export default {
name: 'app'
};
</script> <style lang="scss" scoped>
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router' Vue.config.productionTip = false; new Vue({
router,
render: h => h(App)
}).$mount("#app")

我们还需要安装 vue 和vue router

npm i vue vue-router

运行devServer

还需要安装两个依赖

npm i -D html-webpack-plugin clean-webpack-plugin

webpack.config.js顶部加入如下代码

    const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 注意这里的写法, 这样写 const CleanWebpackPlugin 会报错
  • html-webpack-plugin

官网文档解释:HtmlWebpackPlugin简化了HTML文件的创建,以便为你的webpack包提供服务。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。 你可以让插件为你生成一个HTML文件,使用lodash模板提供你自己的模板,或使用你自己的loader。另外你可以在github查看这个项目的详细配置。

  • clean-webpack-plugin 在每次构建前清理 /dist 文件夹,这样只会生成用到的文件。

配置plugins

    plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './views/index.html'
})
],

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">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

package.json 加入 "start": "webpack-dev-server --open"

  "scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open"
},

跑完发现一大堆报错

  • You may need an additional loader to handle the result of these loaders. Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的
npm i vue-loader-plugin -S

webpack.config.js

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

module.exports = {
// ...
plugins: [
new VueLoaderPlugin()
]
}
  • Cannot find module 'node-sass'

    安装就完了,最后我们npm start 项目成功运行

px2rem

npm install -D px2rem-loader
module: {
rules: [
{
test: /\.html$/,
use: 'html-loader'
},
{
test: /\.vue$/,
use: 'vue-loader'
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'px2rem-loader',
options: {
remUnit: 75,
remPrecision: 6
}
},
'sass-loader'
]
},
]
},

这部分为什么这么配置,参考了Vue官方文档 -> 单文件组建 -> 针对高级用户 -> VueLoader

原来的webpack3.x需要在vue-loader 下配置css 和 sass 并配置 px2rem。

css module

// ...
{
test: /\.scss$/,
use: [
'vue-style-loader',
+ {
+ loader: 'css-loader',
+ options: {
+ modules: true,
+ localIdentName: '[local]_[hash:base64:8]'
+ }
+ },
{
loader: 'px2rem-loader',
options: {
remUnit: 75,
remPrecision: 6
}
},
'sass-loader'
]
},

如果你不知道如何使用css module 请参阅Vue官方文档 -> 单文件组建 -> 针对高级用户 -> VueLoader -> css module

css提取

npm install -D mini-css-extract-plugin
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true
}
},
{
loader: 'px2rem-loader',
options: {
remUnit: 75,
remPrecision: 6
}
},
'sass-loader'
]
},
plugins: [
// ...
new MiniCssExtractPlugin({
filename: 'style.css'
})
]

区分生产环境和开发环境

webpack3

我们需要使用webpack的DefinePlugin创建一个在编译时可以配置的全局常量。在webpack.config.js头部引入webpack

const webpack = require('webpack');

接下来我们把module.exports的值改为箭头函数,并传入一个参数env

module.exports = env => {
if (!env) { env = {} }
return {
// 原来的配置
}
}

我们先来做一个示例,例如我们在开发环境不需要css提取

module.exports = env => {
if (!env) { env = {} } let plugins = [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './views/index.html'
}),
new VueLoaderPlugin(),
]; if (env.production) {
plugins.push(
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: 'production'
}
}),
new MiniCssExtractPlugin({
filename: 'style.css'
})
)
}
  • process 对象是属于node的一个全局变量
  • 我们只需要根据是否传入了env.production,然后给plugins数组push生产环境下需要的MiniCssExtractPlugin插件

对应的我们还有修改部分原来的代码

{
test: /\.scss$/,
use: [
* env.production?MiniCssExtractPlugin.loader:'vue-style-loader',
{
loader: 'css-loader',
options: {
modules: true
}
},
{
loader: 'px2rem-loader',
options: {
remUnit: 75,
remPrecision: 6
}
},
'sass-loader'
]
},

以及原来的plugins配置我们直接将它的值变为我们上面定义的plugins。

package.json中我们需要添加命令

  "scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open",
"watch": "webpack --watch",
"build" : "webpack --env.production"
},

注意我们给webpack 传递了参数,我们就是利用这个参数来区分环境。

npm start



控制台我们可以看到

css样式以style标签插入,并没有被提取,说明MiniCssExtractPlugin插件没有运行

npm run build

运行打包后的index.html,css样式以link标签插入,说明css被提取合并为一个文件,说明生产环境下MiniCssExtractPlugin插件运行了

webpack4

上面是的做法看起来更好理解,webpack4中我们可以直接利用mode来区分开发环境和生产环境。头部我们不需要引入webpack了, 因为我们不需要依赖 DefinePlugin。

配置中新增:

mode: 'development' //默认是 development
module.exports = (env, argv) => {
if (argv.mode === 'production') {
//...
} return config;
};

eslint

npm i eslint -D

eslint支持多种格式的配置文件,同时支持把配置直接写在package.json中,我们直接在写在package.json中,如何配置呢?

vue项目可以直接使用vue官方推荐的插件

npm i eslint-plugin-vue -D

package.json添加如下:

{
// 其他配置
"eslintConfig": {
"root": true,
"parserOptions": {
"ecmaVersion": 2017
},
"extends": [
"mysticatea",
"mysticatea/modules",
"plugin:vue/recommended"
],
"plugins": [
"node"
],
"env": {
"browser": false
},
"globals": {
"applicationCache": false,
"atob": false,
"btoa": false,
"console": false,
"document": false,
"location": false,
"window": false
},
"rules": {
"node/no-extraneous-import": "error",
"node/no-missing-import": "error",
"node/no-unpublished-import": "error",
"vue/html-indent": [
"error",
4
],
"vue/max-attributes-per-line": "off"
}
},
"eslintIgnore": [
"node_modules",
"webpack.config.js"
]
}

webpack 4.x 从零开始初始化一个vue项目的更多相关文章

  1. vue-用Vue-cli从零开始搭建一个Vue项目

    Vue是近两年来比较火的一个前端框架(渐进式框架吧). Vue两大核心思想:组件化和数据驱动.组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用:数据驱动是前端的未来发展方向,释放了对 ...

  2. 如何用vue-cli初始化一个vue项目

    单文件组件和vue-loader 解析打包.vue文件 vue为了能够使我们在项目开发中对组件进行更好的维护,提供了一个单文件组件系统,vue把每一个独立的组件放在一个.vue的文件中,在这个文件中提 ...

  3. 初始化一个vue项目

    1.安装node 端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,vue的运行是要依赖于node的npm的管理工具来实现,下载https://nodejs.org/en/,安 ...

  4. vue学习笔记-初始化一个vue项目(1)

    1.cnpm install -g vue-cliUsage:vue init <template-name> <project-name> 2.我们一般使用webpack模版 ...

  5. 从零开始编写一个vue插件

    title: 从零开始编写一个vue插件 toc: true date: 2018-12-17 10:54:29 categories: Web tags: vue mathjax 写毕设的时候需要一 ...

  6. 开始创建一个 Vue 项目

    开始创建一个 Vue 项目 安装 nodejs 略 安装 npm 默认安装时自带了 npm 安装 cnpm 为了更快的下载组件,使用cnpm,cnpm 是淘宝前端的镜像. 使用 npm 安装 cnpm ...

  7. 从零开始搭建一个react项目

    Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...

  8. Vue系列——如何运行一个Vue项目

    声明 本文转自:如何运行一个Vue项目 正文 一开始很多刚入手vue.js的人,会扒GitHub上的开源项目,但是发现不知如何运行GitHub上的开源项目,很尴尬.通过查阅网上教程,成功搭建好项目环境 ...

  9. 一步步创建第一个Vue项目

    写在了GitHub https://github.com/TaoPanfeng/vue-cms 1 初始化 创建一个文件夹 vue-cms 在vue-cms目录下创建文件 package.json 在 ...

随机推荐

  1. Python3 下的输出字符控制

    最近在使用 python3 进行爬虫的时候,出现了令人窒息的,只会在 python2 中遇到的,没想到在 python3 还能碰见的输出编码问题,报错如下: UnicodeEncodeError: ' ...

  2. CSPS模拟 75

    我身边 mikufun:矩阵树学学学 Lrefrain:矩阵题刷刷刷 Dybala:神仙定理康康康 skyh:讨论讨论讨论(most mei face) DeepinC:我过样例了! Mouding: ...

  3. 域名解析 | A记录 ,CNAME,MX,NS 你懂了吗

    域名解析 | A记录 ,CNAME,MX,NS 你懂了吗 域名解析 什么是域名解析?域名解析就是国际域名或者国内域名以及中文域名等域名申请后做的到IP地址的转换过程.IP地址是网路上标识您站点的数字地 ...

  4. python多进程总结

    概述 由于python中全局解释器锁(GIL)的存在,所以python多线程并不能有效利用CPU多核的性能(相当于单核并发)实现多线程多核并行,所以在对CPU密集型的程序时处理效率较低,反而对IO密集 ...

  5. Kubernetes(k8s)集群安装

    一:简介 二:基础环境安装 1.系统环境 os Role ip Memory Centos 7 master01 192.168.25.30 4G Centos 7 node01 192.168.25 ...

  6. Havok Physics 2012(1)

    目录 Chapter 1. Introduction 1. What is a Physics Engine? Chapter 1. Introduction ​ 欢迎来到Havok Physics ...

  7. Git常用命令(基础)

    Workspace:工作区 Index / Stage:暂存区 Repository:仓库区(或本地仓库) Remote:远程仓库 一.新建代码库 # 在当前目录新建一个Git代码库 $ git in ...

  8. celery 启用worker ValueError: not enough values to unpack

    [2018-01-12 19:08:15,545: INFO/MainProcess] Received task: tasks.add[5d387722-5389-441b-9b01-a619b93 ...

  9. hdu 1233 还是畅通工程 (prim, kruskal)

    还是畅通工程Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  10. 【Java】final修饰符的使用

    final修饰符的使用 1.修饰类: final修饰的类不能被继承,final修饰的类里面的方法都是(隐式)final方法 2.修饰方法: final修饰的方法不能被重写 3.修饰变量(被修饰的变量一 ...