使用webpack 构建简单的vue单页面应用

2018-01-21  本文已影响0人  shibin

准备

const webpack = require('webpack')
const {resolve} = require('path')
const htmlPlugin = require('html-webpack-plugin')
module.exports={
  target: 'web',
  entry: resolve(__dirname, './src/main.js'),
  output: {
    filename: 'buddle.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }, {
        test: /\.jsx$/,
        use: ['babel-loader']
      }, {
        test: /\.(png|jpg|jpeg|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 1024,
              name: 'images/[name].[ext]'
            }
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader', {
            loader: 'postcss-loader',
            options: {
              sourceMap: true
            }
          },
          'sass-loader'
        ]
      }
    ]
  },
  plugins:[
    new htmlPlugin(),
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: isDev
            ? '"development"'
            : '"production"'
        }
      }),
      new htmlPlugin()
    ]
  ]
}
import Vue from 'vue'
import App from './app.vue'
import './css/style.scss'
const root=document.createElement('div')
document.body.appendChild(root)
new Vue({
  render:(h)=>h(App)
}).$mount(root)
<template lang="html">
  <div>
{{text}}
  </div>
</template>

<script>
export default {
data(){
  return {
      text: 'shibin'
    }
  }  
}
</script>

<style lang="scss">

</style>
$nav-color: #F90;
*{
  margin: 0;
  padding: 0;
}
html,body{
    background: url('./../img/1.jpeg')no-repeat center;
    background-size:  100%;
    height:100%;
    color:
}
{
  "presets":[
    "env"
  ],
  "plugins":[
    "transform-vue-jsx"
  ]
}

const autoprefixer = require('autoprefixer')
module.exports = {
  plugins: [
    autoprefixer()
  ]
}

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
//  在webpack plugins 插件增加   new UglifyJsPlugin()
plugins:[
    new UglifyJsPlugin()
]
const extractPlugin = require('extract-text-webpack-plugin')
//首先在上面配置里修改scss文件的处理
{
  test: /\.scss$/,
  use: extractPlugin.extract({
    fallback: 'style-loader',
    use: [
      {
        loader: 'css-loader',
        options:{
          minimize:true
        }
      }, {
        loader: 'postcss-loader',
        options: {
          sourceMap: true
        }
      },
      'sass-loader'
    ],
      publicPath:'../'
  })
}
//在webpack plugins 插件增加
new extractPlugin({
filename:'css/[chunkhash].css'
})
//在上面配置中增加devServer
devServer :{
  port: '8000',
  host: '0.0.0.0',
  overlay: {
    errors: true
  },
  open: true,
  hot: true
}
//在上面plugins配置里增加
new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin()

上一篇下一篇

猜你喜欢

热点阅读