手动webpack vue项目的配置一

初始化项目

1.创建工程文件夹
2.npm init 初始化npm项目
3.安装所需要的包
npm i webpack vue vue-loader
安装后会有提醒更具提醒安装依赖即可.
基于webpack3所需依赖（npm i css-loader vue-template-compiker）

4.新建文件夹client文件夹源码放置的目录

我的工程目录.png

• 新建app.vue文件作为root文件
• 新建一个index.js作为工程的入口文件
• 新建assets文件夹 内部再创建images和styles文件夹
  里面可以放需要使用的图片和css

//index.js
import Vue from 'vue'
import App from './app.vue'

const root = document.createElement('div')
document.body.appendChild(root)
new Vue({
  render: (h) => h(App)
}).$mount(root)

5.新建一个build作为配置文件夹

• 创建3个文件
  vue-loader.config.js vue-loader的配置文件
  webpack.config.base.js 公共配置文件
  webpack.config.client.js 具体客户端配置文件
  5.1 配置 vue-loader.config.js

// const docsLoader = require.resolve('./doc-loader')
module.exports = (isDev) => {
  return {
    preserveWhitepace: true, // 去除空格
    extractCSS: !isDev,
    // 默认vue文件的css是不打包出来的，需要的话加true
    // 正是环境就只是bsae64
    cssModules: {
      localIdentName: isDev ? '[path]-[name]-[hash:base64:5]' : '[hash:base64:5]',
      camelCase: true //命名 转换。比如 。class-header => classHeader
    }
   // 下面的基本不用
    // hotReload:isDev  //热重载 是否开启
    // loaders: { //自定义模块指定loader
    //     'docs':docsLoader
    // },
    // preLoader:
    // {
    //解析完之前在解析
    // },
    // postLoader:{
        //解析完之后
    // }
  }
}

5.2配置 webpack.config.base.js

const path = require('path')
const createVueLoaderoptions = require('./vue-loader.config')

const isDev = process.env.NODE_ENV === 'development'

const config = {
  target: 'web',
  //1.设置入口和出口
  entry: path.join(__dirname, '../client/index.js'),
  output: {
    filename: 'bundle.[hash:8].js',
    path: path.join(__dirname, '../dist')
  },
  module: {
  //2. 加载前端需要使用的所有静态资源
 //2.1 指定文件使用指定loader
    rules: [
       // { 因为我是用stylus 写css所以就不需要这个配置了
       //  test: /\.css$/,
       // use: [
       //    'style-loader',
      //      'css-loader'
      //    ]
      // },
     // {
       // test: /\.styl/,
        //  use: [
        // 一层层解析成我们需要的css
        // 不在这里写是因为需要优化 区分开发环境和正式环境
         //  'style-loader',
         //   'css-loader',
         //   'stylus-loader'
         // ]
        //}
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: createVueLoaderoptions(isDev)
      },
      {
        test: /\.jsx$/,
        loader: 'babel-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
        // 忽略已经编译过的js
      },
      {
        //直接把图片转换成base64代码 减少http请求
        test: /\.(gif|jpg|jpeg|png|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: { //指定loader的操作方式
              limit: 1024,
              //指定输出文件名字
              name: 'resources/[path][name].[hash:8].[ext]'
            }
          }
        ]
      }
    ]
  }
}
module.exports = config

//`npm i style-loader url-loader file-loader`
//安装后可以使用 import './assets/styles/global.styl' 进行//引入 放在index.js 的话表示全局引入
//`npm i stylus-loader stylus` 使用stylus写css需要安装

// npm i postcss-loader autoprefixer babel-loader balel-core
// npm i babel-preset-env babel-plugin-transform-vue-jsx
// (webpack3依赖 npm babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx)

// 创建 .babelrc   转换vue里面的jsx代码
// 创建 postcss.config.js

.babelrc 识别vue内部的jsx代码

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

postcss.config.js 优化代码

const autoprefixer = require('autoprefixer')

module.exports = {
  plugins: [
    autoprefixer()
  ]
}
// 自动加前缀 优化代码 还有其他的自行百度

5.3配置 webpack.config.client.js

const path = require('path')
const webpack = require('webpack')
const HTMLPlugin = require('html-webpack-plugin')
const merge = require('webpack-merge') // 合并配置的插件
const ExtractPlugin = require('extract-text-webpack-plugin')

const baseConfig = require('./webpack.config.base')

//  环境变量的设置
const isDev = process.env.NODE_ENV === 'development'

// 要加入服务端渲染
// 所以 不加入base

// 
const defaultPlugins = [
  // 编译过程中判断 环境 开发环境 错误提示
  // 正式环境打包所需的内容 提高程序的运行效率 而不是全部打包
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: isDev ? '"development"' : '"production"'
    }
  }),
  new HTMLPlugin()
]

// 
const devServer = {
  port: 5900,
  host: '0.0.0.0', // 可以通过ip访问
  overlay: {
    // 编译过程出现错误 显示出来
    errors: true
  },
  // historyFallback: {

  // },
  hot: true
}

let config

if (isDev) {
  config = merge(baseConfig, {
    // 帮助我们调试代码
    devtool: '#cheap-module-eval-source-map',
    module: {
      rules: [{
        test: /\.styl/,
        use: [
          'vue-style-loader',
          'css-loader',
          // {
          //    loader: 'css-loader',
          //     options: {
          //         module:true,
          //         localIdentName: isDev ? '[path]-[name]-[hash:base64:5]' : '[hash:base64:5]'
          //     }
          // },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true
            }
          },
          'stylus-loader'
        ]
      }]
    },
    devServer,
    plugins: defaultPlugins.concat([
      // 2.1 启动热加载的插件
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoEmitOnErrorsPlugin()
    ])
  })
} else {
  config = merge(baseConfig, {
    entry: {
      app: path.join(__dirname, '../client/index.js'),
      vendor: ['vue']
      // 单独打包类库
    },
    output: {
      filename: '[name].[chunkhash:8].js'
    },
    module: {
      rules: [{
        test: /\.styl/,
        use: ExtractPlugin.extract({
          fallback: 'vue-style-loader', // 是把css用js代码包装 把css代码到html里面
          use: [
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true
              }
            },
            'stylus-loader'
          ]
        })
      }]
    },
    plugins: defaultPlugins.concat(
      [ // 指定输出内容的名字
        new ExtractPlugin('styles.[contentHash:8].css'),
        // 单独打包类库代码
        new webpack.optimize.CommonsChunkPlugin({
          name: 'vendor'
        }),
        // webpack 相关代码打包到一个文件
        // 新模块加入给新模块加一个id
        // 规避长缓存问题
        new webpack.optimize.CommonsChunkPlugin({
          name: 'runtime'
        })
      ])
  })
}
module.exports = config

// 1.1npm i webpack-dev-server
// 1.2npm i cross-env  设置环境变量 区分开发环境和正式环境
// 1.3npm i html-webpack-plugin 
// 1.4npm i vue-style-loader -D   处理热更新的依赖

// npm i extract-text-webpack-plugin 把非js 代码 打包成单独文件

// 单独打包类库代码
// chunkhash每一个异步加载的东西都会单独生成一个hash
// hash所以打包js都是同一个hash

// npm webpack-merge 合并webpack的配置
//npm i rimraf -D 配置build过程删除之前的dist文件

vue-loader自定义模块 使用

<template>
  <div></div>
</template>
<docs>
#123 = 456
<docs>

vue-loader 的cssModules功能使用

<template>
  <header :class="$style.mainHeader">
    <h1>JTodo</h1>
  </header>
</template>

<style lang="stylus" module>
.main-header{
  text-align center
  h1{
    font-size 100px
    color: rgba(175, 47, 47, 0.4)
    font-weight 100
    margin 20px
  }
}
</style>

外部引入的css 使用module jsx文件为例子

import className from '../assets/styles/footer.styl'
export default {
  data () {
    return {
      author: 'Jokcy'
    }
  },
  render () {
    return (
      // <div id="footer">
      //   <span>Written by {this.author}</span>
      // </div>
      <div id={className.footer}>
        <span>Written by {this.author}</span>
      </div>
    )
  }
}

npm 命令的配置

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:client": "cross-env NODE_ENV=production webpack --config build/webpack.config.client.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js",
    "build": "npm run clean && npm run build:client",
    "clean": "rimraf dist"
  }