webpack打包vue，使用jquery和bootstrap的一些过程

初次使用webpack打包vue，没有用vue-cli搭建手脚架。开始时要安装很多npm包，以下是package.json文件

{
  "name": "v1",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --hot --inline "
  },
  "author": "",
  "license": "ISC",
  "dependencies": {   
    "vue": "^2.5.17"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^1.0.0",
    "expose-loader": "^0.7.5",
    "file-loader": "^1.1.11",
    "handlebars-loader": "^1.7.0",
    "jquery": "^3.3.1",
    "popper.js": "^1.14.4",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "vue-loader": "^14.2.2",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^3.0.0",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^2.2.0"
  }
}

**注意事项**vue-loader、webpack、webpack-dev-server不要使用最新版，会解析不了vue文件，我开始全部安装的最新版，之后解析不了报错。
新建一个文件，文件名为webpack.config.js里面配置webpack的一些信息。

var webpack = require('webpack');
var path = require('path');
var fs = require('fs')
function resolve(dir)
{
  return fs.realpathSync(__dirname+'/'+dir)
}
module.exports = {
  entry: "./main.js",
  output: {
    path: __dirname,
    filename: "build.js"
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader"
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      },{
        test : /\.(png|jpg|gif)$/,
                    loader : 'url-loader',
      },{
        test : /\.css$/,
        loader : 'style-loader!css-loader'
      },{
        test : /\.scss$/,
        loader : 'style-loader!css-loader'
      },{
        test : /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
                    loader : 'url-loader'
      },{
        test : /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                    loader : 'url-loader'
      },{
        test : /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                    loader : 'file-loader'
      },{
        test : /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                    loader : 'url-loader'
      },{
        test : /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                    loader : "file-loader"
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      Popper: ['popper.js', 'default'],
    })
  ],
  resolve: {
    alias: {
      vue$: "vue/dist/vue"
    }
  }
};

要使用babel需要新建一个文件，名称为.babelrc，里面代码如下

{
   "presets": ["env"]
}

在main.js中写下
import './static/css/bootstrap.css'或者不写这句代码，在页面引用即可
就可以使用bootstrap的样式了
jquery的使用方法不变