Webpack搭建vue项目

创建项目

* npm init -y 

• 安装依赖
  • webpack webpack-cli （4中这两个是分别安装的）
• package.json文件

"dependencies": {
    "axios": "^0.19.0",
    "vue": "^2.6.10",
    "vue-router": "^3.0.7",
    "vuex": "^3.1.1"
  }
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-3": "^6.24.1",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.1.0",
    "echarts": "^4.2.1",
    "file-loader": "^4.1.0",
    "html-webpack-plugin": "^3.2.0",
    "mockjs": "^1.0.1-beta3",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^2.1.0",
    "vue-loader": "^15.7.1",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.38.0",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2",
    "webpack-merge": "^4.2.1"
  }

• webpack.config.js

// 引入相关模块
const path = require('path');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const {
  CleanWebpackPlugin
} = require('clean-webpack-plugin');
const HTMLWebpackPlugin = require('html-webpack-plugin');

// 配置信息
module.exports = {
// 入口文件
  entry: ['babel-polyfill', './src/main.js'],
// 出口文件
  output: {
      filename: '[name].js',
      path: path.resolve(__dirname, './dist')
  },
// 路径重定向
  resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': path.resolve('src')
      }
  },
  module: {
      rules: [{
              test: /\.css$/,
              use: ['style-loader', 'css-loader']
          },
          {
              test: /\.(gif|jpg|png|svg|woff|woff2|eot|ttf|otf)$/,
              use: ['file-loader']
          },
          {
              test: /\.js$/,
              loader: 'babel-loader',
              exclude: /node_modules/
          },
          {
              test: /\.scss$/,
              use: ["vue-style-loader", 'css-loader', 'sass-loader']
          },
          {
              test: /\.sass$/,
              use: ["vue-style-loader", 'css-loader', 'sass-loader?indentedSyntax']
          },
          {
              test: /\.vue$/,
              use: [{
                  loader: 'vue-loader',
                  options: {
                      loaders: {
                          'scss': [
                              'vue-style-loader',
                              'css-loader',
                              'sass-loader'
                          ],
                          'sass': [
                              'vue-style-loader',
                              'css-loader',
                              'sass-loader?indentedSyntax'
                          ]
                      }
                  }
              }]
          }
      ]
  },
  plugins: [
      new CleanWebpackPlugin(),
      new HTMLWebpackPlugin({
          title: 'webpack-echarts',
          template: './index.html',
          filename: 'index.html',
          inject: 'body'
      }),
      new VueLoaderPlugin(),
      new webpack.ProvidePlugin({
          jQuery: 'jquery',
          $: 'jquery'
      })

  ]
}

• .babelrc

{
  "presets": [
      ["env",{
          "modules":false
      }],
      "stage-3"
  ],
  "plugins": ["syntax-dynamic-import"]
}