Vue webpack4.0 + + es6 configuration

Do more with webpack4.0

In the last Introduction to WebPack article, we learned how to build a front-end project using WebPack and learned some of the core concepts of WebPack. But WebPack is much more than that, and in this article, we’ll learn how to do much more with WebPack, how to separate environments, how to configure ES6, then configure VUE, and use VUE for development.

This article is a continuation of the introductory article, those who are not familiar with Webpack can start from the introductory article, step by step.

Separation of development and production environments

In actual development, there are many environments, such as development environment, production environment, test environment, pre-release environment…. (Varies by company). The two most common are development and production environments. There are many different configurations in different environments. So we need to separate the configuration files for different environments from the webpack.config.js file.

First of all, the transformation of the directory. Dependencies are first installed to fuse configuration files.

npm install -D webpack-merge
Copy the code

Webpack - demo | - config | - webpack. Base. Js | - webpack. Dev. Js | - webpack. Pro. Js | - package. Json | - SRC | - slightlyCopy the code

webpack.base.js

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        index: path.resolve(__dirname,'./src/index.js'),
    },
    output: {
        filename: '[name].[hash].js',
        path: path.resolve(__dirname,'.. /dist'),
    },
    module: {
        rules:[
            {
                test: /\.css$/,
                use: [
                    "style-loader"."css-loader"] {},test: /\.(png|svg|jpg|gif)$/,
                use:{
                    loader:'url-loader',
                    options: {
                        limit: 8192,
                        name: 'images/[name].[ext]? [hash]'
                    }
                }
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:'WebpackTest'}})]Copy the code

Output filename modification: We need to modify the filename option for output. After the user visits the web page, bundle.js in the Dist package is loaded and cached. If the loading file name is still bundle.js after we do the version update. Instead of pulling new bundle.js resources, the browser will use the resources cached by the browser. So we need to name the resource differently each time we pack it. [name].[hash].js will add a unique hash to each file name based on the file content, so that duplicate files will not appear.

Development Environment (DEV)

webpack.dev.js

const merge = require("webpack-merge");
const base = require("./webpack.base");
const webpack = require("webpack");

module.exports = merge(base ,{
    mode: 'development',
    devtool: 'source-map',
    devServer:{
        compress: true// Enable compression port: 1207, // open:false// Automatically open the browser hot:true
    },
    plugins:[
        new webpack.HotModuleReplacementPlugin()
    ]
})
Copy the code

Let’s start with a few things we need to configure in our development environment

Source-map: Source-map is very useful in development. The code allowed by the browser is the compiled code. When some errors occur, if you do not use source-map, the error cannot be located in the source code. With source-Map, you can directly locate the row where the error occurred. To configure source-map, simply set the devtool property to source-map.
Devserver configuration: The DevServer property allows you to configure development environment options such as auto-open browser, service port number, heat replacement, compression or not, etc.
Module hot replacement (HotModuleReplacementPlugin) : hot replacement module allows the update of various modules, without having to refresh the page completely, the very useful function in the development environment. In the simplest application scenario, when you write some styles, you need to configure some data, and then you need to adjust the font size. After using the module hot replacement, the page can be seen without refreshing, eliminating the need to reconfigure data. When enabling the hot replacement function, you need to configure the module hot replacement plug-in. Otherwise, an error will be reported.

Production Environment (PRO)

const merge = require('webpack-merge');
const base = require("./webpack.base.js");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require("path");

module.exports = merge(base ,{
    mode: 'production',
    plugins: [
        new CleanWebpackPlugin(['dist'],{
            root: path.resolve(__dirname,'.. / '),})]})Copy the code

Clean-webpack-plugin: Used to delete files. New files will appear in the dist folder every time you pack them. If you do not delete them, they will accumulate in the dist folder. So the clean-webpack-plugin is used to delete the previous dist file each time it is packaged.

Mode (mode)

In getting started, we get a warning that he ‘mode’ option has not been set every time we compile. This is a new mode property for webpack4. There are two modes, development and production.

Development mode:
- willprocess.env.NODE_ENVIs set to development, which used to be configured via webpack.defineplugin.
- Provides comments, detailed error logs and hints at the development stage.
Production mode:
- willprocess.env.NODE_ENVIs set to production, which used to be configured via webpack.definePlugin.
- Turn on all optimization code, compress UglifyJsPlugin, used to need to configure itself.
- Get rid of some code that only runs in development.

The process.env.node_env value is used to determine the environment during redevelopment.

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."dev": "webpack-dev-server --config config/webpack.dev.js"."build": "webpack --config config/webpack.pro.js"
},
Copy the code

Then modify the NPM script to specify the corresponding configuration file.

Es6 configuration

Es6 is not fully supported by all browsers, so we need to convert it to ES5 when we use it. The main tool to be used is Babel. First, install the Babel dependencies.

npm i -D @babel/core @babel/plugin-transform-runtime @babel/preset-env babel-loader
Copy the code

webpack.base.js

. Omitted module:{rulse:[... omitted {test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
        }
    ]
}
Copy the code

Configure the Loader, where the exclde option is used to ignore some files (knock on the board), reducing the amount of webpack processing. /node_modules/ are all files that have been converted.

Add. Babelrc file

Webpack - demo | - config slightly | | - - package. Json | - SRC | - | - slightly. BabelrcCopy the code

{
    "presets": ["@babel/preset-env"]."plugins": ["@babel/plugin-transform-runtime"]}Copy the code

Presets (transcoding rules) : used to specify rule sets, now used@babel/preset-envcollocation@babel/coreTo solve
Plugins:transform-runtimeThe plugin says it will transcode ES6 syntax to ES5 regardless of whether the browser supports ES6 or not

resolve

These options set how the module is parsed. The @/ XXX/XXX commonly used in VUE development is to configure the @ symbol as the SRC directory. This configuration not only facilitates development, but also optimizes build time and reduces webPack’s workload. In addition, you can configure automatic name completion.

resolve: {
    extensions: [ '.js'.'.vue'.'.scss'.'.css'], // The suffix is automatically completedalias: {// aliasThe '@': path.resolve(__dirname, '.. /src'),}},Copy the code

Vue configuration

Finally, we configure the VUE, installing the dependencies first.

npm i -D vue vue-loader vue-style-loader vue-template-compiler
Copy the code

Vue-loader is the loader of vue. The vue file is an SFC class file, which is parsed into three parts. The template part is used to render view, JS, and style.
Vue-style-loader is used to process the style parsed by vue-loader.
Vue-template-compiler is used to process parsed templates.

Carry out directory transformation first

Webpack - demo | - config slightly | | - - package. Json | - SRC | - components | - the HelloWorld. Vue | - views | - App. Vue | - asset | - img.png |- style.css |- index.html |- index.js |- .babelrc |- package.jsonCopy the code

webpack.base.js

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const ProgressBarPlugin = require('progress-bar-webpack-plugin'); module.exports = { ... A module: {rules: [{test: /\.css$/,
                use: [
                    "style-loader"."vue-style-loader"."css-loader"] {},test: /\.(png|svg|jpg|gif)$/,
                use:'url-loader'}, {test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
            },{
                test:/\.vue$/,
                use: 'vue-loader'
            }
        ]
    },
    plugins:[
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            filename: './index.html'// file name template:'./src/index.html', // template file})]}Copy the code

Here we also need to install VueLoaderPlugin() and reconfigure the HtmlWebpackPlugin. We need to use our own template because we have to create a div entry to mount the vue instance on. You cannot create div entries using the plug-in as it was.

index.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>webpackStudy</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>
Copy the code

index.js

import Vue from 'vue'
import App from './views/APP'
import '@/asset/style'

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

HelloWorld.vue

<template>
    <div>
        <img src=".. /asset/img.png" alt=""</p> </div> </template> <script>export default {

}
</script>

<style scoped>
p{
    font-size: 50px;
}
</style>
Copy the code

App.vue

<template>
  <div id="app">
    <hello-world></hello-world>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld'

export default {
  name: "App",
  components: {
    HelloWorld
  }
};
</script>
Copy the code

Index.js is still our webpack entry, we import CSS files and app. vue entry files, vue instantiation, mount on the root node (the root node of the index.html file).
Then you can begin component development.

Small tools

Webpack packaging is time-consuming when our components are in hiding, so let’s install a ProgressBarPlugin to check the packaging progress.

npm i -D progress-bar-webpack-plugin
Copy the code

Plugins :[new ProgressBarPlugin()// Pack progress bar]Copy the code

github

Source code in my Github warehouse step2 branch, I hope to be able to help you.

END

Webpack this ability stacks will be the front end engineers must, for the small white, at first might not too good understanding, actually don’t have to see him too hard, where is the file from which to a packaging tool, what we do is just put his various modules from which to which to problems with good, will understand every part. The next step is to build on that.

Vue webpack4.0 + + es6 configuration

Separation of development and production environments

Development Environment (DEV)

Production Environment (PRO)

Mode (mode)

Es6 configuration

resolve

Vue configuration

Small tools

github

END

Related Posts

Learn Kubernetes in 3 hours

Primary/secondary database replication configuration method

【 Information package 】 the major factory recommended system to share the actual combat collection