vue2+webpack4+scss

栏目: 编程语言 · 发布时间: 5年前

内容简介:作者:心叶时间:2019年01月30日 10:37由于webpack的配置具有实时性,之前搭建的vue2项目是基于webpack2,因此,特地在此维护一篇关于webpack4搭建vue2项目的说明,会及时更新(github地址:

作者:心叶

时间:2019年01月30日 10:37

前要

由于webpack的配置具有实时性,之前搭建的vue2项目是基于webpack2,因此,特地在此维护一篇关于webpack4搭建vue2项目的说明,会及时更新(github地址: https://github.com/yelloxing/... )。

基础配置

npm install --save-dev vue vue-router

由于是搭建vue2项目,首先需要安装用到的vue和vue路由。

npm install --save-dev webpack webpack-cli

接着,安装webpack,建立好空的webpack.config.js,如下:

module.exports = {
    entry: ['./src/entry.js'],
    output: {
        path: __dirname,
        filename: 'build/main.js'
    },
    resolve: {
        alias: {
            'vue': 'vue/dist/vue.js'
        }
    },
    module: {
        rules: []
    }
};

上面的配置和webpack2的没有区别,这里不再赘述了(entry:打包入口,output:打包文件存放地址,resolve的配置是因为vue2在开发和生成模式对象不统一)。

解析vue2

npm install --save-dev vue-template-compiler vue-loader

首先安装vue模板解析器,接着,在webpack.config.js中配置一下:

...
rules: [{
    test: /\.vue$/,
    use: ['vue-loader']
}]
...

配置的时候,其实就是加上上面这二句代码。

到此为止,最简单的项目就搭建好了。

为了方便执行,在package.json中添加下面脚本:

"scripts": {
    "release": "node_modules/.bin/webpack"
}

然后在命令行执行:

npm run release

搭建开发环境

上面的打包方式时候开发完毕以后,发布代码,如果是开发中,我们希望实时刷新。

首先安装服务器:

npm install --save-dev webpack-dev-server

接着在webpack中配置:

...
devServer: {
    contentBase: './',
    compress: true,
    host: 'localhost',
    port: '20000',
    hot: true,
    inline: true,
    historyApiFallback: true
},
plugins: [
    new webpack.HotModuleReplacementPlugin()
],
module:
...

然后,在package.json中添加下面脚本:

"scripts": {
    "dev":"node_modules/.bin/webpack-dev-server --open",
    "release": "node_modules/.bin/webpack"
}

执行下面命令:

npm run dev

浏览器会自动打开:localhost:20000

完善vue配置

npm install --save-dev vue-style-loader css-loader

上面是添加项目中对css的解析器,再在webpack.config.js中添加如下配置,即可开发css代码:

{
    test: /\.css$/,
    use: ['vue-style-loader', 'css-loader']
}

添加对scss的支持

npm install --save-dev sass-loader node-sass

然后,添加下面配置:

{
    test: /\.scss$/,
    use: ["vue-style-loader", "css-loader", "sass-loader"]
}

添加对图片的支持

npm install --save-dev file-loader

然后,添加下面配置:

{
    test: /\.(png|jpg|jpeg|gif|bmp)$/,
    use: ['file-loader?limit=7000&name=build/image/[name].[ext]']
}

如果你使用的图片格式不被上面的test包含,需要手动额外添加即可。

后记

完整的代码维护在github中,会及时更新: https://github.com/yelloxing/...

希望对你学习vue2有所帮助 :)


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

CSS禅意花园

CSS禅意花园

[美] Dave Shea、Molly E. Holzschlag / 陈黎夫、山崺颋 / 人民邮电出版社 / 2007-6 / 49.00元

这本书的作者是世界著名的网站设计师,书中的范例来自网站设计领域最著名的网站——CSS Zen Garden(CSS禅意花园)。全书分为两个主要部分。第1章为第一部分,讨论网站“CSS禅意花同”及其最基本的主题,包含正确的标记结构和灵活性规划等。第二部分包括6章,占据了书中的大部分篇幅。 每章剖析“CSS禅意花园”收录的6件设计作品,这些作品围绕一个主要的设计概念展开,如文字的使用等。通过探索......一起来看看 《CSS禅意花园》 这本书的介绍吧!

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具