Vue2.6.10 webpack 3.10.0 and binding configuration

 

package.json

{
  "name": "03_webpack-vue-router",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 20001 --contentBase src --hot "
  },
  "keywords": [],
  "author": "yangw",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^3.3.7",
    "jquery": "^3.4.1",
    "mint-ui": "^2.2.13",
    "moment": "^2.24.0",
    "vue": "^2.6.10",
    "vue-preview": "^1.1.3",
    "vue-resource": "^1.5.1",
    "vue-router": "^3.0.7",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-transform-remove-strict-mode": "0.0.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.10",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^2.30.0",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "vue-loader": "^14.2.3",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.1"
  }
}

webpack.config.js

// WebPACK node.js is based, it is possible to use the content of node.js 
// This JS profile, by NODE module operation, a configuration object Baolei outwardly. 

path const = the require ( 'path' ); 

// import generated html plugin memory (as long as the plug, are in the need to register the plugins) 
const = htmlWebpackPlugin the require ( 'html-WebPACK-plugin' ); 

module.exports = {
     // inlet entry, i.e. use webpack packaged file 
    entry: path.join (__ dirname, '. / the src / main.js'),   // root path on the current splicing main.js 
    // outlet, and output-related 
    output : { 
        path: path.join (__ dirname, './dist'), // the specified directory to the output 
        filename: 'bundle.js'                 // the specified output file name 
    },
    
    plugins: [ 
        new new htmlWebpackPlugin ({ // generated html plug-in memory 
            // specified template page 
            Template: path.join (__ dirname, '/ the src / index.html.' ), 
            filename: 'index.html' // Specify name producer pages 
        }) 
    ], 

    Module1: { 
        the rules: [ 
            // configuration file to a third party css end loader 
            {test:. / \ css $ /, use: [ 'style-loader', 'css-loader ' ]}, 
            {Test: /\.less$/,use:['style-loader','css-loader','less-loader' ]}, 
            {Test: / \ SCSS $ /, use:. [ 'style-Loader', 'CSS-Loader', 'Sass-Loader' ]},
           // with pictures
            {the Test: / \ (PNG | JPG | BMP | GIF | jpeg) $ /, use:. 'url-Loader limit = 10240 & name = [hash: 8] - [name] [EXT]?.' },
             // Font processing icon 
            {the Test:. / \ (ttf | woff2 | WOFF | SVG | EOT) $ /, use: 'url-Loader' },
             // configuration process Babel ES advanced syntax 
            {test: / \ js $ / ,. use: 'Babel-Loader', the exclude: / the node_modules / },
             // packed vue file 
            {Test:. / \ vue /, use: 'vue-Loader' } 
        ] 
    }, 

    Resolve: { 
        Alias: { 
            // "vue $ ":" VUE / dist / vue.js " 
        } 
    } 
}

.babelrc

{
    "presets":["env","stage-0"],
    "plugins":["transform-runtime",
        ["component", 
          [{
          "libraryName": "mint-ui",
          "style": true
        }]
      ],"transform-remove-strict-mode"
    ]
}

 

 Project directory structure roughly

 

The figure sample project initialization file downloads:  https://files.cnblogs.com/files/yangw/webpack-vue-project-init.zip

 

note: 

1, install Node.js

2, installation CNPM

3, into the project root directory, execute cnpm install the dependent packages may download all

4, in vscode development tools integrated command line to run the project npm run dev

5. To package the development of good projects, you can run directly webpack, the final document will be generated in dist directory

 

If the project initialization packet does not meet your requirements, you can use the command to install

npm install XXX -D

npm install YYY -S

To install, you can specify a version number @ ^ version number, such as:

npm install html-webpack-plugin@^2.30.0 -D