用 Webpack 来搭建 Vue.js 的开发环境

其他 2018-09-27 18:57:13 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_23179075/article/details/79307198

请注明出处：http://blog.csdn.net/qq_23179075/article/details/79307198

image.png

1 初始化项目并用 vue-loader+webpack 配置项目

1.1 用 npm 初始化项目目录

npm init -y

目录下生成 package.json 可以设置下自己的信息

{
  "name": "todolist",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

1.2 用 npm 安装 webpack, vue, vue-loader

cnpm i webpack vue vue-loader --save

安装完成后控制台出现下面两条警告:image.png

因为 vue-loader 需要两个第三方依赖 : css-loader , vue-template-compiler ,这里继续通过 npm 安装需要的依赖即可.

cnpm i css-loader vue-template-compiler --save

1.3 创建 webpack 的配置文件

在项目根目录下创建一个 webpack.config.js 的文件, 配置内容如下:

const path = require('path')

module.exports = {
    entry: path.join(__dirname, 'src/index.js'), //入口文件 __dirname:目录所在的地址
    output: {
        filename: 'bundle.js', //输出文件名
        path: path.join(__dirname, 'dist') //输出文件地址
    }
}

1.4 创建项目的基础文件, 并通过 webpack 打包

在项目目录下创建一个 src 目录, 在 src 目录下创建一个 Vue 的基础组件 app.vue 和一个入口文件 index.js

app.vue 内容如下:

<template>
  <div id="test">{{text}}</div>
</template>

<script>
export default {
    data () {
        return {
            text:'abc'
        }
    }
};
</script>

<style>
    #test{
        color: red;
    }
</style>

index.js 内容如下:

import Vue from 'vue'
import App from './app.vue'

const root = document.createElement('div')
document.body.appendChild(root)

new new Vue({
    render:(h) =>(App)
}).$mount(root)

创建完成后, 就可以用 webpack 工具进行打包了, 在命令行执行如下命令:

webpack

但是当执行完这个命令会出现如下的错误:

image.png

可以看到上面的错误提示是 解析 app.vue 这个文件出错, 需要我们为这个文件声明一个 loader, 因为 webpack 这个打包工具只支持原生的 js 文件类型, 并且支持的语法只是 ES5 的语法, 所以我们需要在 webpack.config.js 中配置能解析 .vue 文件的 loader. 

const path = require('path')

module.exports = {
    entry: path.join(__dirname, 'src/index.js'), //入口文件 __dirname:目录所在的地址
    output: {
        filename: 'bundle.js', //输出文件名
        path: path.join(__dirname, 'dist') //输出文件地址
    },
    module:{
        rules:[
            {
                test: /.vue$/,
                loader: 'vue-loader'
            }
        ]
    }
}

为了方便命令的运行, 我们统一使用 npm 脚本来运行项目中的一些常用的命令, 在 package.json 中做如下配置:

{
  ...其它属性...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack" // 使用 webpack 工具打包-- .json文件是不支持注释的,运行时去掉该注释
  },
  ...其它属性...
}

这个时候我们只要在控制台输入如下命令就可一运行了:

npm run build

执行完成, 不出错的情况下 项目根目录下回多出一个这个样的文件目录结构 dist/bundle.js .

2.webpack 配置项目加载各种静态资源及 css 预处理器

2.1 在 webpack.config.js 中配置加载 css , 图片 等的 loader

    module:{
        rules:[
            {
                //加载 .vue 文件
                test:/\.vue$/,
                loader:'vue-loader'
            },
            {
                //加载 .css 文件
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                //加载图片文件
                test:/\.(gif|png|jpg|jpeg|svg)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{//loader 的参数配置
                            limit:1024, // 图片大小 1024
                            name:'Ican-[name].[ext]'//新文件名字 Ican-: 文件名前缀, [name]:原文件名,[ext]:扩展名
                        }
                    }
                ]
            }
        ]
    }

开始的时候我们已经安装了几个 loader 了, 下面把上面配置文件中没有的安装的 loader 通过 npm 安装下

cnpm i style-loader url-loader file-loader --save

因为 url-loader 是依赖于 file-loader 的, 所以这里一并也将 file-loader 安装了.

2.2 创建 assets 静态资源目录

在 src 目录下创建 assets/images 和 assets/styles 两个目录，并且放一些测试的图片 和 css 文件

image.png

test.css 中的内容:

body {
    color: red;
    background-image: url('../images/education.svg')
}

然后在 index.js 文件中引入这些资源

import './assets/styles/test.css'
import './assets/images/bg.jpg'

运行一下打包命令后，可以在 dist 目录下看到我们的图片文件说明配置正确

image.png

2.3 添加 css 预处理器 stylus-loader [ 可忽略 ]

在 webpack.config.js 中添加以下代码

...其它loader配置...
{
    //css 预处理器
    test:/\.styl/,
    use:[
        'style-loader',
        'css-loader',
        'stylus-loader'
    ]
},
...其它loader配置...

通过 npm 安装 stylus-loader 

cnpm i stylus-loader stylus --save

在 index.js 文件中引用 .styl 文件的方式跟引用 .css 文件的方式相同.

3.webpack-dev-server的配置和使用

3.1 通过 npm 安装 webpack-dev-server 、 cross-env 和 html-webpack-plugin

  • cross-env 主要用来给 node.js的脚本文件设置环境变量的。

  • html-webpack-plugin 这个插件可以自动创建一个 index.html 的入口文件,并且自动引入项目中打包后的 js文件。

cnpm i webpack-dev-server cross-env html-webpack-plugin --save

安装完成后再 package.json 添加脚本：修改后完整的package.json文件

{
  "name": "todolist",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "cross-env NODE_ENV=product webpack --config webpack.config.js",
    "dev": "cross-env NODE_ENV=dev webpack-dev-server --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cross-env": "^5.1.3",
    "css-loader": "^0.28.9",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.30.1",
    "style-loader": "^0.19.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "url-loader": "^0.6.2",
    "vue": "^2.5.13",
    "vue-loader": "^13.7.0",
    "vue-template-compiler": "^2.5.13",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.1"
  }
}

上面的 cross-env NODE_ENV=XXX 就是指定的一个变量名: NODE_ENV 值为: XXX ,变量会存在一个 process.env 的js 对象中。

当然还需要修改一下 webpack 的配置，来专门适应我们 webpack-dev-server 的开发模式,同时需要根据上面脚本文件设置的变量进行开发环境的判断。

修改后完整的 webpack.config.js 配置文件

const path = require('path')

const HTMLPlugin = require('html-webpack-plugin');

const webpack = require('webpack');

//判断当前环境是否是开发环境 dev 
const isDev = process.env.NODE_ENV === "dev"

const config = {
    target: 'web',//编译目标设置为web平台
    entry: path.join(__dirname, 'src/index.js'), //入口文件 __dirname:目录所在的地址
    output: {
        filename: 'bundle.js', //输出文件名
        path: path.join(__dirname, 'dist') //输出文件地址
    },
    module: {
        rules: [
            {
                //加载 .vue 文件
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                //加载 .css 文件
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                //css 预处理器
                test: /\.styl/,
                use: [
                    'style-loader',
                    'css-loader',
                    'stylus-loader'
                ]
            },
            {
                //加载图片文件
                test: /\.(gif|png|jpg|jpeg|svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {//loader 的参数配置
                            limit: 1024, // 图片大小 1024
                            name: 'Ican-[name].[ext]'//新文件名字 Ican-: 文件名前缀, [name]:原文件名,[ext]:扩展名
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: isDev ? '"dev"' : '"product"'
            }
        }),
        new HTMLPlugin()
    ]
}

if (isDev) {
    config.devtool = '#cheap-module-eval-map'
    config.devServer = {
        port: '8000', //服务器端口
        host: '0.0.0.0',
        overlay: {
            errors: true,//将错误显示在网页上
        },
        hot: true, //页面重新加载只重新渲染被修改过的组件
        // open: true //运行devServer时自动打开浏览器
    }
    config.plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin
    )
}

module.exports = config

配置完成后就可以运行了：

npm run dev

源码地址：https://github.com/azhengyongqin/Vue_webpack

猜你喜欢

转载自blog.csdn.net/qq_23179075/article/details/79307198
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022