在Webpack4.0+Vue2.5项目中使用SCSS、ES6以及DEV SERVER


注:本文的项目配置基于 : Webpack4.0+Vue2.5项目构建

Part.1 处理scss文件

处理scss文件,我们需要使用sass-loader和node-sass这两个包

  • 安装sass-loader
    npm install sass-loader -D
  • 安装node-sass
    npm install node-sass -D

同样需要在webpack.config.js中编写相应的规则:

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

为了验证,我们将App.vue组件中的样式加上scss语法

<template lang="html">
<div>
 <h1>hello mragon</h1>
</div>
</template>

<script>
export default {}
</script>

//注意:这里的语言类型一定要改成scss
<style lang="scss">
h1 {
    color: red;
    &:hover {
        color: blue;
    }
}
</style>

配置完成后可以打包项目查看效果

Part.2 处理ES6

处理Es6,我们需要使用babel-loader,babel-core和babel-preset-env这三个包,先依次安装

  • 安装babel-loader
    npm install babel-loader -D
  • 安装babel-core
    npm install babel-core -D
  • 安装 babel-preset-env
    npm install babel-preset-env -D

在webpack.config.js中编写相应的规则:

{
     
    test: /\.js$/,
    loader: 'babel-loader',
           
}

Part.3 使用devServer

webpack给我们提供了一个webpack-dev-server,用来搭建一个服务器环境,并且可以在我们修改代码之后自动打包项目,大大方便了我们的开发

想要使用devServer,首先使用npm 安装 相应的包
npm install webpack-dev-server -D

安装之后在webpack.config.js中进行配置

//添加一个新的属性名为 devServer
devServer: {
    //指定打包之后的项目内容所在路径,用于启动服务
    contentBase: './dist'
},

之后使用webpack-dev-server --open启动服务器

如果感觉这个命令太冗长,也可以使用npm的script脚本来简化命令,在此不过多赘述

声明:Mragon|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 在Webpack4.0+Vue2.5项目中使用SCSS、ES6以及DEV SERVER


Carpe Diem and Do what I like