vuejs学习3.6 webpack——搭建本地服务器与分离配置文件

webpack提供了一个可选的本地开发服务器，基于nodejs搭建，内部使用express框架，可以实现让浏览器自动刷新修改后的结果

搭建本地服务器

暂时缓存到内存，没有添加到磁盘中

安装 webpack-dev-server

npm install webpack-dev-server@2.9.1 --save-dev

配置

devServer:{
    //用于服务的文件夹
    contentBase:'./dist',
    //是否需要实时监听
    inline:true,
  }

运行方式

package.json进行配置脚本"scripts"：

//如果需要手动打开
"dev": "webpack-dev-server"

//如果需要自动打开
"dev": "webpack-dev-server --open"

运行npm run dev

在改代码后，浏览器会自动刷新，不用再次run

终止方式

ctrl + c 然后选择Y终止本地服务器

配置文件的分离

webpack.config.js配置文件过多，有些是开发时依赖的配置，有些是发布时依赖的配置，可以进行分离
根目录下建立一个build文件夹，下添加一个base.config.js用来存放公共依赖的配置：

base.config.js

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'bundle.js',
    // publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时, 是从右向左
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader", // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader", // compiles Less to CSS
        }]
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 当加载的图片, 小于limit时, 会将图片编译成base64字符串形式.
              // 当加载的图片, 大于limit时, 需要使用file-loader模块进行加载.
              limit: 13000,
              name: 'img/[name].[hash:8].[ext]'
            },
          }
        ]
      },
      {
        test: /\.js$/,
        // exclude: 排除
        // include: 包含
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  resolve: {
    // alias: 别名
    extensions: ['.js', '.css', '.vue'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  plugins: [
    new webpack.BannerPlugin('最终版权归aaa所有'),
    new HtmlWebpackPlugin({
      template: 'index.html'
    })
  ]
}

dev.config.js

下面为开发时依赖的配置，需要通过webpackMerge来对配置进行合并

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

module.exports = webpackMerge(baseConfig, {
  devServer: {
    contentBase: './dist',
    inline: true
  }
})

prod.config.js

下面为发布时依赖的配置，需要通过webpackMerge来对配置进行合并

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

module.exports = webpackMerge(baseConfig, {
  plugins: [
    new UglifyjsWebpackPlugin()
  ]
})

解释

在合并时需要通过使用webpackMerge来实现

安装webpackMerge

npm install webpack-merge --save-dev

使用webpackMerge

通过webpackMerge合并时需要先导入webpackMerge

const webpackMerge = require('webpack-merge')

使用时需要合并base.config.js，所以也需要导入：

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

使用时：

module.exports = webpackMerge(baseConfig, {
  plugins: [
    new UglifyjsWebpackPlugin()
  ]
})

结果

可以删除webpack.config.js

调用——修改配置文件package.json

设置脚本 --config 配置目录

"build": "webpack --config ./build/prod.config.js",
"dev": "webpack-dev-server --open --config ./build/dev.config.js"

运行文件路径问题

在npm run build后发现dist文件夹打包到了build文件夹下，这是因为在配置时，如下：

output:{
    path:path.resolve(__dirname,'dist'),
    filename:"bundle.js",
  }

__dirname为当前配置文件的目录，但是在build文件夹下，因为dist需要和build文件夹同级目录，所以需要…/来跳到上一级目录，最后应该是：

  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'bundle.js',
  },