Webback4. X configuration of vue project

These two days, I played with webback and lay in a lot of holes. Today, I read a blogger's article to solve this problem. He explains each part of the configuration.

99.9% of the following configuration is copied from the blogger: https://www.cnblogs.com/nianyifenzhizuo/p/10271001.html

Installing node sass in package.json may not succeed due to network reasons

There is a long list of error messages, in which python and gyp are mentioned, but they need not be installed. Just execute the following command:

npm set sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

 

npm i node-sass -D

 

The following is the basic configuration of a vue project:

Project root:

package.json
postcss.config.js
.babelrc

 

Project root = > build folder

const webpack = require('webpack')
const { resolve }= require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const isDev = process.env.NODE_ENV === 'production'


let pluginsConfig = [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
        title: 'my App',
        template: resolve(__dirname, '../src/index.html')
    }),
    new webpack.DefinePlugin({
        'process.env': {
            'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        }
    })
]
if (!isDev) {
    pluginsConfig = pluginsConfig.concat(new MiniCssExtractPlugin({
        filename: "css/[name]_[contenthash].css"
    }))
}

module.exports = {
    mode: process.env.NODE_ENV || 'production',
    entry: resolve(__dirname, '../src/index.js'),
    output: {
        filename: 'bundle.js',
        path: resolve(__dirname, '../dist')
    },
    resolve: {
        //Suffixes can be omitted when importing
        extensions: ['.js', '.vue', '.json'],
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          //@That's it src Folder path
          '@': resolve('src'),
        }
    },
    module: {
        rules: [{
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.scss$/,
                use: [
                    isDev ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            localIdentName: '[local]_[hash:base64:8]'
                        }
                    },
                    'sass-loader'
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                loader: 'url-loader?name=images/[name]-[contenthash:5].[ext]&limit=2000'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader?cacheDirectory',
                exclude: '/node_modules/',
                include: resolve(__dirname, '../src')
            }
        ]
    },
    plugins: pluginsConfig,
}
webpack.base.confg.js
const webpack = require('webpack')
const path = require('path')
const WebPackBaseConfig = require('./webpack.base.conf.js')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const WebPackMerge = require('webpack-merge')

module.exports = WebPackMerge(WebPackBaseConfig, {
    devtool: 'inline-source-map',
    devServer: {
        contentBase: path.join(__dirname, 'dist'), //Tell the server which directory to provide content from
        compress: true, //Enable gzip compress
        port: 9000, //Port number
        host: '0.0.0.0', //The default is localhost. If you want external access to the server,Set to 0.0.0.0
        hot: true //Enable hot swap module must be configured webpack.HotModuleReplacementPlugin
    },
    plugins: [
        new CleanWebpackPlugin(['dist']), //Clean up folders
        new webpack.HotModuleReplacementPlugin(), //Enable hot swap module
        new webpack.NamedModulesPlugin() //Enable HMR Time,The plug-in will display the relative path of the module
    ]
})
webpack.dev.conf.js
const webpack = require('webpack')
const path = require('path')
const WebPackMerge = require('webpack-merge')
const WebPackBaseConfig = require('./webpack.base.conf.js')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const glob = require('glob-all')
const PurifyCSSPlugin = require('purifycss-webpack')

module.exports = WebPackMerge(WebPackBaseConfig, {
    output: {
        filename: '[name].js',
        chunkFilename: '[name].[chunkhash:5].js',
        path: path.resolve(__dirname, 'dist')
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all'
                }
            }
        },
        runtimeChunk: true,
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true
            }),
            new OptimizeCSSAssetsPlugin()
        ]
    },
    plugins: [
        new PurifyCSSPlugin({
            paths: glob.sync([
                path.join(__dirname, '../src/')
            ]),
            purifyOptions: {
                whitelist: ['*purify*']
            }
        }),
    ]
})
webpack.prod.conf.js
 

Project root = > SRC folder

import Vue from 'vue'
import router from './router/index.js'

new Vue({
    el: '#app',
    router
})
index.js
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <title></title>
</head>
<body>
    <div id="app" v-cloak>
        <router-view></router-view>
    </div>
</body>
</html>
index.html
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
App.vue

 

Project root = > SRC folder = > router folder

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
index.js

Project root = > SRC folder = > components folder

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped, lang="sass" src='@/assets/css/admin.scss'></style>
HelloWorld.vue
Project root = > SRC folder = > assets folder = > CSS
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}


$link-color: #ff6000;
a {
  color: $link_color;
}
admin.scss

Tags: Javascript Vue Webpack sass JSON

Posted on Tue, 03 Dec 2019 10:14:09 -0500 by DigitalNinja