阅读 9254

从搭建vue-脚手架到掌握webpack配置(一.基础配置)

前言

学习vue的过程肯定会接触到vue的单文件组件,进而接触到vue-cli(vue工程构建的脚手架工具),但是vue-cli创建的工程对初学者很不友好,vue init webpack-simple project-name创建的项目又太过简单和片面。

本教程会分几篇文章逐步深入配置webpack,想要后续更新可以关注哦~

接下来我们从初始化到写配置再到添加loader和插件逐步构建一个可用的vue工程化环境,让初学者亲自搭建vue-cli之余还了解到webpack常用的一些配置项。

注意 本教程适用webpack3,并不支持webpack4以上

一些官方文档

vue-loader

vue-loader,是用于编译vue项目中组件化文件 *.vue ,把其转换为JavaScript的webpack loader。这是vue工作最重要也是一定会用到的loader,所以提前提一下。

创建工程

前提你已经安装了node、npm环境

mkdir project-vue
cd project-vue

npm init
//初始化设置都按enter默认就好,或者按你需要改
复制代码

安装webpack到项目中

npm install --save-dev webpack
//啰嗦一下淘宝镜像设置
npm install -g cnpm –registry=https://registry.npm.taobao.org
复制代码

创建webpack配置文件

webpack在运行时候会找到启用webpack命令目录下的webpack.config.js,所以要创建该文件到项目根目录下。

//webpack.config.js
const path = require('path')
module.exports ={
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:"js/[name].js"
    }
}
复制代码

以上是最简单的模板,设置了入口文件(entry)和出口地址(output),这些有一点webpack基础的都知道,不了解的先去入门一下webpack的基础配置。

而path函数则是node自带的路径相关的中间件,基本上整个项目就用到这样一个node的中间件,path就是用来做路径拼接返回一个路径字符串,可以简要看一下path

  • 同时还要创建index.html和main.js文件,项目目录结构如下:

项目目录结构

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue demo</title>
</head>
<body>
    <div id="app">
    </div>
    <script src="./dist/js/main.js"></script>
</body>
</html>

复制代码

main.js里面随便写点js就行

运行一下试试

webpack
复制代码

没有在全局安装webpacknpm install -g webpack的话以上命令无法执行。也可以修改npm scripts快捷运行,打开package.json,添加scripts项。

这里有一份阮一峰老师 npm script的介绍,不用谢

{
  "name": "vue-demo",
  "version": "1.0.0",
  "description": "this is a vue demo",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  }
}
复制代码
npm run build
复制代码

根目录下会多出一个dist文件夹里面放了打包好的文件。

引入一系列的依赖和loader

vue工程当然要安装vue依赖啦~~

npm install --save vue

复制代码

vue-loader是必须的,vue-template-compiler是vue-loader必须的依赖

npm install --save-dev vue-loader vue-template-compiler
复制代码

写现代的项目怎么可能不用到es6以上,来个es编译器loader

npm install --save-dev babel-core babel-loader
复制代码

再来个css的加载器和转换器,style-loader会把css转成js,再贴到html的style标签上的哦~

npm install --save-dev css-loader style-loader
复制代码

还有图片文件和字体文件的加载器,url-loader依赖于file-loader所以都要安装,url-loader会把小于限制的文件改成base64格式直接传入src里面,可以降低网络请求次数。而file-loader会自动帮我们添加文件名规则而且url地址一起跟着改变。

npm install --save-dev file-loader url-loader
复制代码

以上的loader的配置下面开始简要讲解

loader配置项

每一种loader都对应着一种文件,我们匹配项目种的文件添加loader。

配置项的简要介绍写在注释里啰, 认真看注释咯!!!

const path = require('path')
const webpack = require('webpack')

module.exports = {
    entry:{
        app:'./src/main.js',
    },
    output:{
        path:path.resolve(__dirname,'./dist'),
        filename:"js/[name].js",
    },
    module:{
        rules:[
            {
                test:/\.js$/, //用正则匹配文件,用require或者import引入的都会匹配到
                loader:"babel-loader", //加载器名,就是上一步安装的loader
                exclude:/node_modules/ //排除node_modules目录,我们不加载node模块中的js哦~
            },
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader',
                    // 'postcss-loader'
                ]
                
                //依次使用以上loader加载css文件,postcss-loader可以暂时不加,后面再深入修改webpack配置的时候再说用处
                //
                //也可以写成这样 loader:"style-loader!css-loader!postcss-loader"
            },
            {
                test:/\.(png|jpe?j|gif|svg)(\?.*)?$/,
                loader:'url-loader',
                options:{
                    limit:10000,
                    name:'img/[name].[ext]?[hash]'
                }
                //图片文件大小小于limit的数值,就会被改写成base64直接填入url里面,
                //不然会输出到dist/img目录下,[name]原文件名,[ext]原后缀,[hash]在url上加上一点哈希值避免缓存。
            },
            {
                test:/\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader:"url-loader",
                options:{
                    limit:10000,
                    name:'fonts/[name].[ext]?[hash]'
                }
                //和上面一致
            },
            {
                test:/\.vue$/,
                loader:'vue-loader'
                //这一个loader当然是vue项目必须的加载器啦,不加其他规则的话,
                //简单的这样引入就可以了,vue-loader会把vue单文件直接转成js。
            },
        ]
    },
    resolve:{
        //引入路径是不用写对应的后缀名
        extensions: ['.js', '.vue', '.json'],
        //缩写扩展
        alias:{
            //正在使用的是vue的运行时版本,而此版本中的编译器时不可用的,我们需要把它切换成运行时 + 编译的版本
            'vue$':'vue/dist/vue.esm.js',// 'vue/dist/vue.common.js' for webpack 1
            //用@直接指引到src目录下,如:'./src/main'可以写成、'@/main'
            '@': path.resolve(__dirname,'./src'),
        }
    },
}
复制代码

官方中文文档还介绍了一些以上用到的loader和其他的loader,可以去看一下。

用loader的时候可以上《npmjs》查看每个loader或者依赖的详细用法,这是一个好习惯!~

npmjs

开始使用.vue

不要说你一点vue都不会来看这偏文章哦

main.js改成如下

import Vue from 'vue'
import './styles/main.css'
import App from './app.vue'

new Vue({
  el:"#app",
  template:'<App/>',
  components:{App}
})

复制代码

新建一个app.vue文件

<template>
    <div id="app">
        <img src="./images/logo.png" alt="logo" />
        <span>{{msg}}</span>
        <p class="test">test text</p>
    </div>
</template>
<script>
import Vue from 'vue'
    export default {
        name:'app',
        data(){
            return {
                msg:"hello vue !!"
            }
        },
    }
</script>
<style >
    .test{
        color:#020202
    }
</style>
<style lang="less"><!--我好像还没说引入less哦,下面说-->
    #app{
        img{width:100px;}
    }
</style>
复制代码

别忘了弄张图片,写个main.css哦

/*main.css*/
@import './reset.css';
#app{
    color:red;
}
复制代码

我还引入了reset.css

src目录

用less或者sass

你可以在项目中用less或者sass,相对的就要安装less-loader和sass-loader

npm install --save-dev less-loader
npm install --save-dev sass-loader
复制代码

如果没有在全局安装less或sass编译器的话还有安装一下,执行上面loader安装之前先安装less或sass

安装到本项目中
npm install --save-dev less
安装到全局中
npm install --g less
复制代码

以less-loader为例,修改webpack.config.js

{
    test:/\.less$/,
    use:[
        'vue-style-loader'
        'css-loader',
        'less-loader'
    ]
},
{
    test:/\.vue$/,
    loader:'vue-loader',
    options:{
        loaders:{
            'less':[//lang属性对应的名称
                'vue-style-loader'//首先给vue的样式loader过滤一遍
                'css-loader',//css-loader,把css转js
                'less-loader'//用less编译
            ]
        }
    }
}
复制代码

使用vue单文件组件的时候给lang属性添加标识就可以了,less后缀的文件也会一起进行编译

<style lang="less">
    #app{
        img{width:100px;}
    }
</style>
复制代码

sass类似,但sass带有两种语法规范sass和scss,需要分别设置,下面就贴一点vue-cli的代码,不过的介绍了。

sass

根据less和sass预处理器的添加和配置方法,你可以用上typeScript、pug等js和html的预处理插件。记得给template、script、style标签添加lang属性说明哦

有了es6 用上js的其他预处理语言的情况也不多了,html的话还是习惯写完整dom

打包运行一下

打包之前我改改npm scripts,这样就可以看到打包进度,和隐藏不必要的信息

 "build": "webpack --progress --hide-modules"
复制代码

运行打包

npm run build
复制代码

在浏览器中打开index.html,可以看到运行正常

image


下期预告

目前整个vue项目基本可用,但是还处在最基础的loader添加和配置阶段,后续还有热插拔、代码提取、代码压缩的等一系列plugins(插件)的引入。

有vue-cli和webpack使用基础的人会认为,以上内容更偏向入门,但是凡事都有一个顺序渐进的过程,对初学者来说从0开始搭建是一个很有效的学习过程,基础工程搭好了,后面就是重头戏了。

下一期我们来进一步添加插件实现更多的功能,也会引入编译器转换器的第三方配置介绍(.babelrc、postcss)。

参考

文章分类
前端
文章标签