✨ add source-map for example

example/index.html

@@ -1,2 +1 @@
 <div id="app"></div>
-<script src="/dist/bundle.js"></script>

example/webpack.config.js

@@ -1,97 +1,105 @@
 const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
 const VueLoaderPlugin = require('../lib/plugin')
 
-module.exports = {
- mode: 'development',
- entry: path.resolve(__dirname, './main.js'),
- output: {
- path: path.resolve(__dirname, 'dist'),
- filename: 'bundle.js',
- publicPath: '/dist/'
- },
- devServer: {
- stats: "minimal",
- contentBase: __dirname
- },
- module: {
- rules: [
- // { loader: require.resolve('./debugger') },
- {
- test: /\.vue$/,
- loader: 'vue-loader'
- },
- // example to apply loader to a custom block without lang="xxx"
- // this rule applies to <foo> blocks
- {
- resourceQuery: /blockType=foo/,
- loader: 'babel-loader'
- },
- // example configuring preprocessor for <template lang="pug">
- {
- test: /\.pug$/,
- oneOf: [
- // this applies to <template lang="pug"> in Vue components
- {
- resourceQuery: /^\?vue/,
- use: ['pug-plain-loader']
- },
- // this applies to pug imports inside JavaScript
- {
- use: ['raw-loader', 'pug-plain-loader']
- }
- ]
- },
- // example configuring CSS Modules
- {
- test: /\.css$/,
- oneOf: [
- // this applies to <style module>
- {
- resourceQuery: /module/,
- use: [
- 'vue-style-loader',
- {
- loader: 'css-loader',
- options: {
- modules: true,
- localIdentName: '[local]_[hash:base64:8]'
+module.exports = (env, options) => {
+ const isDevServer = !!options.$0.match(/webpack-dev-server$/)
+ return {
+ mode: 'development',
+ entry: path.resolve(__dirname, './main.js'),
+ output: {
+ path: path.resolve(__dirname, 'dist'),
+ filename: 'bundle.js',
+ publicPath: isDevServer ? '/' : './'
+ },
+ devServer: {
+ stats: "minimal",
+ contentBase: __dirname
+ },
+ devtool: 'source-map',
+ module: {
+ rules: [
+ // { loader: require.resolve('./debugger') },
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader'
+ },
+ // example to apply loader to a custom block without lang="xxx"
+ // this rule applies to <foo> blocks
+ {
+ resourceQuery: /blockType=foo/,
+ loader: 'babel-loader'
+ },
+ // example configuring preprocessor for <template lang="pug">
+ {
+ test: /\.pug$/,
+ oneOf: [
+ // this applies to <template lang="pug"> in Vue components
+ {
+ resourceQuery: /^\?vue/,
+ use: ['pug-plain-loader']
+ },
+ // this applies to pug imports inside JavaScript
+ {
+ use: ['raw-loader', 'pug-plain-loader']
+ }
+ ]
+ },
+ // example configuring CSS Modules
+ {
+ test: /\.css$/,
+ oneOf: [
+ // this applies to <style module>
+ {
+ resourceQuery: /module/,
+ use: [
+ 'vue-style-loader',
+ {
+ loader: 'css-loader',
+ options: {
+ modules: true,
+ localIdentName: '[local]_[hash:base64:8]'
+ }
  }
+ ]
+ },
+ // this applies to <style> or <style scoped>
+ {
+ use: [
+ 'vue-style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ },
+ // exmaple configration for <style lang="scss">
+ {
+ test: /\.scss$/,
+ use: [
+ 'vue-style-loader',
+ 'css-loader',
+ {
+ loader: 'sass-loader',
+ // global data for all components
+ // this can be read from a scss file
+ options: {
+ data: '$color: red;'
  }
- ]
- },
- // this applies to <style> or <style scoped>
- {
- use: [
- 'vue-style-loader',
- 'css-loader'
- ]
- }
- ]
- },
- // exmaple configration for <style lang="scss">
- {
- test: /\.scss$/,
- use: [
- 'vue-style-loader',
- 'css-loader',
- {
- loader: 'sass-loader',
- // global data for all components
- // this can be read from a scss file
- options: {
- data: '$color: red;'
  }
- }
- ]
+ ]
+ }
+ ]
+ },
+ resolveLoader: {
+ alias: {
+ 'vue-loader': require.resolve('../lib')
  }
+ },
+ plugins: [
+ new HtmlWebpackPlugin({
+ template: path.resolve(__dirname, 'index.html')
+ }),
+ new VueLoaderPlugin()
  ]
- },
- resolveLoader: {
- alias: {
- 'vue-loader': require.resolve('../lib')
- }
- },
- plugins: [
- new VueLoaderPlugin()
- ]
-}
+ }
+}

package.json

@@ -66,7 +66,7 @@
  "eslint": "^4.19.0",
  "eslint-plugin-vue-libs": "^2.1.0",
  "file-loader": "^1.1.11",
- "html-webpack-plugin": "4.0.0-beta.14",
+ "html-webpack-plugin": "4.0.0",
  "javascript-stringify": "^1.6.0",
  "jest": "^23.5.0",
  "jsdom": "^11.6.2",

yarn.lock

@@ -5516,10 +5516,10 @@ html-minifier@^3.2.3:
  relateurl "0.2.x"
  uglify-js "3.4.x"
 
-[email protected]-beta.14:
- version "4.0.0-beta.14"
- resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.0.0-beta.14.tgz#1d3dc299a89391c6fb84c6ed94e7ebe53a9261a0"
- integrity sha512-gdThA8oCH7PbHMbezNW5LD+hjxXTzwhfi4XFDKKo5Gs0BR1IhVChEZN1ub4YEKQBmOYasdnCGGPEOFggdm9hNA==
+[email protected]:
+ version "4.0.0"
+ resolved "https://registry.npm.taobao.org/html-webpack-plugin/download/html-webpack-plugin-4.0.0.tgz#5b3343312554d16ba98d9b1a85348c77bf733b3a"
+ integrity sha1-WzNDMSVU0WupjZsahTSMd79zOzo=
  dependencies:
  html-minifier-terser "^5.0.1"
  loader-utils "^1.2.3"