前端程序员@IT·互联网

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

2018-01-08  本文已影响601人  JasonWild

前言

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

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

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

一些官方文档

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。

项目结构.png

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或者依赖的详细用法，这是一个好习惯！~

npm官网.png

开始使用.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目录.png

用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.png

根据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,可以看到运行正常

页面.png

下期预告

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

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

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

！！！文章首发地址

参考

上一篇 下一篇

猜你喜欢

热点阅读