Webpack builds the Vue project manually

Initialize the project

Create a new directory and initialize the project

npm init
Copy the code

Add the following dependencies to package.json

NPM install -- Production dependencies = NPM install --production"dependencies": {
    "vue": "^ 2.6.10"} // devDependencies is set to "modules" and "NPM i-save-dev""devDependencies": {// Install Babel related"@babel/core": "^ 7.4.5"."@babel/preset-env": "^ 7.4.5"."@babel/preset-react": "^ 7.0.0." "."babel-loader": "^ 8.0.6"."babel-polyfill": "^ 6.26.0"// Plugins: Empty old files every time you build"clean-webpack-plugin": "^ 3.0.0"// CSS processing"css-loader": "^ 2.1.1", // Handle CSS compatibility"postcss-loader": "^ 3.0.0"."autoprefixer": "^ 9.6.0", // Add sASS support"node-sass": "^ 4.12.0"."sass-loader": "^ 7.1.0"/ / the plugin"html-webpack-plugin": "^ 3.2.0"."style-loader": "^ 0.23.1"// Add webPack packaging"webpack": "^ 4.33.0"."webpack-cli": "^ 3.3.3", // Provide a Web container, which can be accessed locally at http://localhost:port"webpack-dev-server": "^ 3.7.1." "// Provide configuration file merge"webpack-merge": "^ 2"// Add vue-loader"vue-loader": "^ 15.7.0"."vue-template-compiler": "^ 2.6.10",}Copy the code

Install the above dependencies

npm install
Copy the code

Configuration bable

Create a new.babelrc file in the root directory

{
    "presets": [
        "@babel/preset-env"]},Copy the code

Add postcss.config.js to the root directory

module.exports = {  
    plugins: {  
      'autoprefixer': {browsers: 'last 5 version'}}}Copy the code

Create a new webpack.base.config.js in the root directory as the base WebPack configuration

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin'); Module.exports = {// exports file entry:'./src/index.js',
    output: {
        filename: 'bundle.[hash].js',
        path: path.join(__dirname, '/dist'}, module: {// configure the corresponding rules.test: /\.(sa|sc|c)ss$/,
                use: [
                    'style-loader'.'css-loader'.'postcss-loader'.'sass-loader',]}, {test: /\.vue$/,
                loader: 'vue-loader'},}, // Plugins: [new HtmlWebpackPlugin({template:'./src/index.html'
        }),
        new CleanWebpackPlugin()
    ]
};

Copy the code

Create a new webpack.dev.config.js file in the root directory as the configuration for the development environment

const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.config.js'); Module. exports = merge(baseConfig, {// set to dev mode:'development',
    devtool: 'inline-source-map'// Configure server directory and port devServer: {contentBase:'./dist',
        port: 3000
    }
});

Copy the code

In the root directory of new webpack. Product. Config. Js files as the production environment configuration

const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.config.js'); Module. exports = merge(baseConfig, {// set to export mode:'production'
});

Copy the code

Configuration Script Command

  "scripts": {
    "start": "webpack-dev-server --open --config webpack.dev.config.js"."build": "webpack --config webpack.product.config.js"
  },
Copy the code

Create a new SRC directory and index.html in the root directory

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack & Vue</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

Copy the code

Create the entry files index.js and app.vue in SRC

import Vue from 'vue';
import App from './App.vue';
import './index.scss';

new Vue({
  el: '#root',
  render: h => h(App),
});

Copy the code

<template>
  <div id="app">
    <h1 class="hello">hello webpack & Vue</h1>
  </div>
</template>

<script>
export default {
  name: "app"
};
</script>

<style scoped>
</style>

Copy the code

Create an index. SCSS file in the SRC directory to test the SCSS file

$blog-color-red: #ff0000;

.hello {
    color: $blog-color-red;
}

Copy the code

To run the program

npm run start
Copy the code

Not surprisingly, execution jumps to the browser interface and displays a red **Hello Vue & Webpack! * * the words

The packaged file

npm run build
Copy the code

The dist file will be generated in the root directory as expected, and you can open it between folders, showing a red **Hello Vue & Webpack! * * the words

conclusion

In the past, the scaffolding tools that come with the framework were also generally used. Taking advantage of the Time of Dragon Boat Festival, we took the initiative to configure Webpack & Vue. Of course, the above are only some simple configurations, and more complex configurations need to modify the Webpack configuration, which can be supplemented later. Configure WebPack & React.

GitHub address: github.com/kavience/we…

(after)

Webpack builds the Vue project manually