vue2+webpack4+scss

红太狼 2021-03-23 13:46 521阅读 0赞

## 前要 ##

由于webpack的配置具有实时性，之前搭建的vue2项目是基于webpack2，因此，特地在此维护一篇关于webpack4搭建vue2项目的说明，会及时更新（github地址：[https://github.com/yelloxing/...][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

然后，添加下面配置：