准备

• 安装依赖的插件npm i webpack cross-env style-loader css-loader postcss-loader autoprefixer scss-loader vue vue-loader url-loader file-loader babel-loader babel-core html-webpack-plugin --save-dev
• 编写webpack配置文件（webpack.conf.js）

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()
    ]
  ]
}

• 编写入口文件main.js

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)

• 编写app.vue

<template lang="html">
  <div>
{{text}}
  </div>
</template>

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

<style lang="scss">

</style>

• 编写style.scss

$nav-color: #F90;
*{
  margin: 0;
  padding: 0;
}
html,body{
    background: url('./../img/1.jpeg')no-repeat center;
    background-size:  100%;
    height:100%;
    color:
}

• 配置.babelrc,这样就可以在应用里面使用es6的语法了

{
  "presets":[
    "env"
  ],
  "plugins":[
    "transform-vue-jsx"
  ]
}

• 在postcss.config.js里配置postcss

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

• 在pockage.json里面增加build命令cross-env NODE_ENV=production webpack --config webpack.conf.js

• 执行npm run build命令

• 这样一个简单的vue单页面应用已经构建好了

• 若要压缩js文件，需要安装npm i uglifyjs-webpack-plugin

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
//  在webpack plugins 插件增加   new UglifyJsPlugin()
plugins:[
    new UglifyJsPlugin()
]

• 如果要单独打包css文件.安装npm i extract-text-webpack-plugin

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'
})

• 安装webpack-dev-server,这样我们就能实时预览项目.npm i webpack-dev-server

//在上面配置中增加devServer
devServer :{
  port: '8000',
  host: '0.0.0.0',
  overlay: {
    errors: true
  },
  open: true,
  hot: true
}
//在上面plugins配置里增加
new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin()

• 在package.json 增加dev命令 cross-env NODE_ENV=development webpack-dev-server --config webpack.conf.js,这样我们执行npm run dev就可以进行实时调试我们的项目了