webpack搭建vue 项目的步骤(4)

日期：2020-05-11 栏目：程序人生浏览：次

<script src="./demo.js" > </script>

main.js中改回原来的设置

logo:logo,

重新编译后图片在两种情况下都可以加载出来了。

还有一中比较常用的方式是在编译时自动在dist的目录中创建一个html文件并将index.html中的内容复制过去。此时我们需要时webpack的 HtmlWebpackPlugin 插件。

HtmlWebpackPlugin 插件

引入插件

npm install --save-dev html-webpack-plugin

webpack.config.js 中增加如下配置

const HtmlWebpackPlugin = require('html-webpack-plugin')
...

plugins:[
  new HtmlWebpackPlugin()
]

重新编译后发现在dist目录下生成了如下内容的html的文件

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Webpack App</title>
 </head>
 <body>
 <script type="text/javascript" src="demo.js"></script></body>
</html>

与我们原来自己的写index.html相比，该文件缺少了下面这些这些内容

<div id="app">
  <img :src="logo" alt="logo" class="logo">
  {{msg}}
 </div>

现在需要对配置文件做稍微的修改，让html文件在创建的时候自动将index.html的中内容复制过去。通过查阅该插件的文档，可知需做如下修改：

plugins:[
  new HtmlWebpackPlugin({
   title: 'vue demo',
   template: 'index.html'   
  })
]

index.html 文件中去除 script代码，在重新编译后，即可获取我们需要的html文件

详细参数配置请参考官方文档

webpack-dev-server

在我们实际开发中需要将代码部署在server中，而不是在浏览器中直接打开文件。此时我们需要使用webpack的 webpack-dev-server 。

webpack-dev-server 为我们提供了一个简单的web服务器，并且能够实时重新加载（live reloading）。

npm install --save-dev webpack-dev-server

在webpack.config.js 文件中需要指定一个文件夹,告诉开发服务器需要从哪儿加载文件

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

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "demo.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'vue demo',
      template: 'index.html'
    })
  ],
  devServer:{
    contentBase:"./dist"
  },
  module: {
    rules: [{
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      }, {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }, {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
  }
}

转载注明出处：http://www.heiqu.com/468.html

webpack搭建vue 项目的步骤(4)

相关推荐