webpack项目搭建（三）

配置 devServer

npm install -D webpack-dev-server

const path = require('path')
//
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 导入loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
// 用于热部署
const webpack = require('webpack')

module.exports = {
     
  // 模式
  mode: 'development',
  // 打包的入口
  entry: './src/main.js',
  // 打包的出口
  output: {
     
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // loader插件配置
  module: {
     
    rules: [
      // 配置解析vue文件
      {
     
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // {
     
      //   test: /\.(jpg|jpeg|png|svg)$/,
      //   loader: 'file-loader',
      //   options: { // 正常打包后，会把匹配到图片文件复制到dist下，并且以他的hash值作为名字，可使用占位符改变名字
      //     name: '[name].[ext]', // 占位符：[name]表示使用源文件名，[ext]使用原来扩展名
      //     // limit:2048 // 当文件小于 2048byte 时, 以 base64 打包到 js 中, 当文件大于 2048byte 时, 使用 file-loader 打包
      //   }
      // },
      // 上下两个好像不可以同时存在
      {
     
        test: /\.(jpg|jpeg|png|svg|gif)$/,
        loader: 'url-loader',
        options: {
     
          name: '[name].[ext]',
          limit: 2048
        }
      },
      {
     
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] // 执行顺序是从右到左， 解决文件之间的依赖关系, 把所有的 css 文件打包成一个文件，将 css-loader 打包完成后生成的文件挂载到页面的 head 标签的 style 中
      },
      {
     
        test: /\.styl(us)?$/,
        use: ['style-loader', 'css-loader', 'stylus-loader']
      },
      // 处理vue文件中的style,其实也是只使用上面这里就可以了
      // {
     
      //   test: /\.styl(us)?$/,
      //   use: ['vue-style-loader', 'css-loader', 'stylus-loader']
      // }
    ]
  },
  plugins: [
    // 一定要引入此插件
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
     
      template: './src/index.html'
    }),
    // 使用热部署插件
    new webpack.HotModuleReplacementPlugin()
  ],
  // 使用别名
  // 作用就是：webpack打包会生成三个文件
  /*  
     runtime only 的文件 vue.common.js
     compiler only 的文件 compiler.js
     runtime + compiler 的文件 vue.js 
      
  */
  // 而默认导出的是 vue.common.js,正常是 runtime + compiler 的文件 vue.js ，下面就是解决办法
  resolve: {
     
    alias: {
     
      'vue': 'vue/dist/vue.js'
    }
  },
  // devServer配置
  devServer: {
     
    // 指定服务器根目录
    contentBase: './dist',
    // 自动打开浏览器
    open: true,
    port: 9000,
    hot:true // 启用热部署
  },
}

SourceMap

• 源代码映射) 建立打包后的文件和源代码所在行的映射,
• 主要作用: 在开发时快速定位到出错的源代码行

生产环境

• 在 开发环境 中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module
  replacement)能力的 source map 和 localhost server。
• 在 生产环境 中，我们的目标则转向于关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间
  因此, 配置会有所不同, 官方推荐使用两个不同的配置文件
• webpack.dev.js: 用于开发环境
• webpack.prod.js: 用于生产环境
  提取公共部分

npm install -D webpack-merge

webpack.base.js

// 使用node的path模块
const path = require('path')
// 引入vue-loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')

// 导入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 导入clean-webpack-plugin
const {
      CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
     
  // 打包的入口
  entry: './src/main.js',

  // 插件
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
     
      template: './src/index.html'
    }),
    new CleanWebpackPlugin()
  ],

  // 打包的出口
  output: {
     
    filename: 'app.js',
    path: path.resolve(__dirname,'../dist')
  },
  // 打包规则
  module: {
     
    rules: [
      {
     
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
     
        test: /\.(jpg|jpeg|png|svg)$/,
        loader: 'url-loader',
        options: {
     
          name: '[name].[ext]',
          limit:2048
        }
      },
      {
     
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
     
        test: /\.styl(us)?$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'stylus-loader']
      }
    ]
  },
  resolve: {
     
    alias: {
     
      vue: 'vue/dist/vue.js',
      '@': path.resolve(__dirname, '../src'),  // 配置别名，使用@就相当于使用src文件
      'styles':path.resolve(__dirname,'../src/assets/styles') // 除了src外的文件做别名的时候，使用它的时候要这样  '~styles/aa.css'
    }
  }
}

webpack.dev.js

// 导入webpack
const webpack = require('webpack')

const {
     merge} = require('webpack-merge')
const baseConfig = require('./webpack.base.js')

const devConfig = {
     
  // 模式
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  devServer: {
     
    // 指定服务器根目录
    contentBase: './dist',
    // 自动打开浏览器
    open: true,
    // 启用热模块替换
    hot: true
  },
  // 插件
  plugins: [new webpack.HotModuleReplacementPlugin()]
}

module.exports = merge(baseConfig, devConfig)

webpack.prod.js

const {
     merge} = require('webpack-merge')
const baseConfig = require('./webpack.base.js')

const prodConfig = {
     
  // 模式
  mode: 'production'
}

module.exports = merge(baseConfig, prodConfig)

解析 ES6 语法

在项目中, 有时我们可能会使用 ES6 的语法, 而这些内容在低版本的浏览器上是不支持的. 往往不能正常解析.

一般, 我们会使用 babel 将 ES6 编译成 ES5 的语法.

babel 的内容是非常丰富的. 我们这里只是演示一些最基本的配置和用法

npm install -D babel-loader @babel/core

   {
     
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }

npm install @babel/preset-env -D

创建一个文件.babelrc再根目录，内容下面

{
      "presets": ["@babel/preset-env"] }