vue2+webpack4+scss

作者：心葉
時間：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有所幫助 :)