011 webpack used vue

One: Use the vue in webpack

1. Install package vue

2.index.html

<!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>Document</title>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
    </div>
</body>
</html>

3.main.js

// js main entrance 
the console.log ( "OK") 

// Import from Vue '../node_modules/vue/dist/vue.js' 
Import from Vue' VUE ' 

var = new new VUE Vue ({ 
    EL:' # App ', 
    Data: { 
        MSG:' 123 ' 
    } 

})

4. Run

　　Will be thrown

　　vue.runtime.esm.js:620 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)

The reason

　　Find the rules package:
　　　　1. To find the root of the project folder there node_modules
　　　　2. node_modules according to the package name, find the corresponding vue folder
　　　　3. vue folder, look for a package called the configuration of package.json file
　　　　4. in package.json file, look for a main attribute [main attribute specifies when the package is loaded, the entry file]

6. The first approach

　　Specific references to package path

　　import Vue from '../node_modules/vue/dist/vue.js'

7. The second way

　　A node in the added resolve webpack.config.js

the require path = const ( 'path'); 

const = htmlWebpackPlugin the require ( 'HTML-WebPACK-plugin') 

module.exports = { 
    entry: path.join (__ dirname, '. / the src / main.js'), 
    Output: { 
        path: path.join (__ dirname, '/ dist.'), 
        filename: 'bundle.js' 
    }, 

    plugins: [ 
        new new htmlWebpackPlugin ({ 
            Template: '. / the src / index.html' path.join (__ dirname,), 
            filename: 'index.html' 
        }) 
    ], 

    // configuration for all third-party modules loader 
    Module1: { 
        // matching rules 
        the rules: [  
            {Test:. / \ CSS $ /, use: [ 'style-Loader ',' css-loader '] }, // regular
            {Test: / \ less $ /, use:. [ 'style-Loader ',' css-loader ', ' less-loader ']}, // treated sequentially forward 
            {test:. / \ (jpg | png | BMP | JPEG) $ /, use: '? URL Loader-limit = 983 & name = [the hash:. 9] - [name] [EXT].'}, 
            {Test: /\.(ttf|eot|svg|woff|woff2 ) $ /, use: 'url -loader'}, // process the font file loader 
            {test: /\.js$/, use: ' babel-loader', exclude: / node_modules /}, // configured to Babel advanced syntax conversion ES 
        ] 
    }, 
    Resolve: { 
        Alias: { 
            'VUE $': 'VUE / dist / vue.js' 
        } 
    } 

}

8. Effect

Two: Use webpack specified process template vue

1. Description

　　Because webpack recommended .vue this template file defines the components, so here we continue to use webpack specified vue

2. Under src New login.vue

<Template> 
  <div> 
    <h1 of> component which is logged, using the definition file .vue out MSG} {} {--- </ h1 of> 
  </ div> 
</ Template> 

<Script> 

</ Script> 

<style > 

</ style>

3. Install

　　CNPM view i-loader-template-view compile -D

4. Increase the rule webpack.config.js

the require path = const ( 'path'); the require path = const ( 'path'); 
const = htmlWebpackPlugin the require ( 'HTML-WebPACK-plugin') 
module.exports = { 
    entry: path.join (__ dirname, '. / the src / main.js'), 
    Output: { 
        path: path.join (__ dirname, '/ dist.'), 
        filename: 'bundle.js' 
    }, 
    plugins: [ 
        new new htmlWebpackPlugin ({ 
            Template: '. / the src / index.html' path.join (__ dirname,), 
            filename: 'index.html' 
        }) 
    ], 
    // configuration for all third-party modules loader 
    Module1: { 
        // matching rules 
        the rules: [ 
            {Test:. / \ CSS $ /, use: [ 'style-Loader ',' css-loader '] }, // regular

const = htmlWebpackPlugin the require ( 'HTML-WebPACK-plugin') 

module.exports = { 
    entry: path.join (__ dirname, '. / the src / main.js'), 
    Output: { 
        path: path.join (__ dirname, '/ dist.'), 
        filename: 'bundle.js' 
    }, 

    plugins: [ 
        new new htmlWebpackPlugin ({ 
            Template: '. / the src / index.html' path.join (__ dirname,), 
            filename: 'index.html' 
        }) 
    ], 

    // configuration for all third-party modules loader 
    Module1: { 
        // matching rules 
        the rules: [ 
            {. test: / \ less $ /, use: [ 'style-loader', 'css-loader', 'less-loader']}, // Previous sequentially processed 
            {test:. / \ (jpg | png | BMP | JPEG) $ /, use: '? URL Loader-limit = 983 & name = [the hash:. 9] - [name] [EXT].'}, 
            {Test: /\.(ttf|eot|svg|woff|woff2 ) $ /, use: 'url -loader'}, // process the font file loader 
            {test: /\.js$/, use: ' babel-loader', exclude: / node_modules /}, // configured to Babel ES syntax conversion advanced 
            {test: /\.vue$/, use: ' vue-loader'} // loader file processing .vue 
        ] 
    }, 
    Resolve: { 
        Alias: { 
            // 'VUE $': 'VUE / dist / vue.js' 
        } 
    } 

}

011 webpack used vue

Guess you like