Webpack--搭建本地服务器以及配置文件的分离

1,083 阅读4分钟

搭建本地服务器的作用

本地服务器是一个基于node的服务器。我觉得没必要深究它是怎么实现的,只要知道他是什么作用就好。以往我们打包项目是打包到dist文件夹,将打包的内容存储到磁盘中,当我们调试项目的时候,从磁盘中读取文件。这样的话,很耗费时间。因为磁盘读取很耗费时间。而我们本地服务器,就可以把我们的项目打包放在内存中,而不是磁盘中。这样读取速度就上去了。当项目代码改变的时候,他会自动打包,打包到内存中。

搭建本地服务器的方法

首先他也是一个模块,首先安装。

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

第二步,配置它,同样是在webpack.config.js中配置。

  • contentBase 监听的文件
  • inline 是不是实时监听

使用本地服务器

在终端中,直接输入webpack-dev-server,是不行的。因为他会从全局中找这个模块。而不会从局部中找这个模块。所以还是在package.json中配置scripts。 执行npm run dev 默认跑在8080端口上。点击链接即是我们的项目。
如果想要在打包后立即打开链接可以这样配置scripts.

 "dev":"webpack-dev-server  --open"

webpack.config.js配置文件的分离

为什么要分离配置文件

有一些配置是我们运行测试时需要的,比如说上文的derServer 有一些配置是我们要进行最终打包到磁盘中需要的,比如说压缩js代码。 所以我们要将他们进行一个分离,上述的两个过程也对应我们之前的两种指令

  • aaa webpack 最终打包的时候执行
  • dev webpack-dev-server 打包测试开发阶段执行

所我们把webpack.config.js一分为三

  • base.config.js 基础共有的配置文件。
  • dev.config.js 项目开发时特有的配置文件
  • prod.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",
        
    },
    module: {
        rules: [
          {
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
          },
          {
            test: /\.(png|jpg|gif)$/,
            use: [
              {
                loader: 'url-loader',
                options: {
                    limit:8192,
                  name:"img/[name].[hash:6].[ext]"
                }
              }
            ]
          },
          {
            test: /\.vue$/,
            use: [
           'vue-loader'
            ]
          }
        ]
      },
      plugins:[
          new webpack.BannerPlugin("我是猪我是猪我是猪"),
          new HtmlWebpackPlugin({
              template:"./index.html"
          })
      ],
      resolve:{
         extensions:['.vue','.js'],
          alias:{
              "vue$":"vue/dist/vue.esm.js"
          }
      },
   
}

prod.config.js :(将压缩js的plugin分离)

 const uglifyjsplugin = require("uglifyjs-webpack-plugin");
const base = require("./base.config.js");
const webpackMerge = require("webpack-merge"); 
module.exports=webpackMerge({
    plugins:[
        new uglifyjsplugin()]
},base);

dev.config.js:(将配置本地服务器的配置分离)

const base = require("./base.config.js");
const webpackMerge = require("webpack-merge"); 
module.exports=webpackMerge({
    devServer:{
        contentBase:"./dist",
        inline:true
    }
},base);

在开发过程中,我们要将base.config.js+dev.config.js合并作为配置文件。而在打包上线的阶段我们需要base.config.js+prod.config.js合并作为配置文件。
怎么合并呢?
要通过一个模块:webpack-merge。安装模块。

npm install webpack-merge@4.1.5 --save-dev

dev.config.js和prod.config.js中导入模块:

const webpackMerge = require("webpack-merge"); 

使用webpackMerge将两个对象合并,然后导出。

打包遇到的问题1

进行打包:

npm run aaa

报错,显示找不到webpack的配置项,并且它的名字应该叫webpack.config.js。那我们应该主动指定webpack的配置项是哪个文件,在哪里。怎么设置呢?
在后面添加 --config + 配置文件相对路径
执行aaa的时候,实际上是最后打包上线的阶段。所以应该使用prod.config.js 执行dev的时候,实际是开发阶段,所以应该使用的配置文件时 dev.config.js

打包遇到的问题2

npm run aaa 

解决问题一后,再进行打包,发现dist文件夹生成在build文件夹下,这是为什么呢?
因为设置出口的时候是通过__dirname动态获取绝对路径的,最后再拼接dist。 而现在我们的__dirname生成的绝对路径并不是指向我们的项目文件,而是指向项目文件的子文件夹build。最后再拼接dist肯定就生成在了 项目/build/dist 文件夹中了。如果想生成在 项目/dist 文件夹中,得返回上一级才行。

给文件起别名

起别名的好处

在webpack的配置中,可以给文件起别名。起别名有什么好处呢?我觉得有两个好处而且相当实用:

  • 当引用时,文件路径写起来,特别繁琐的时候,可以利用文件别名,缩短文件路径长度
  • 当你使用别名的时候,其实你基于别名编写的路径就是一个绝对路径!那么你把你的代码任意剪切,放到别的文件中,也不会出现代码中路径找不到的问题。

怎样起别名

在webpack的配置中,文件路径的相关配置都在这个resolve对象中 resolve对象中的alias属性就是给文件起别名。 这里就是给src路径起了一个别名,@

使用别名

一般在两个场景使用别名:

  • import '路径',这里的路径就可以使用别名:
import "@/index.js"

就是src下面的index.js文件

  • 其他情况使用路径,比如说img的src属性。这些情况要使用路径的话,要使用别名的话前面得加~
<img src="~@/img.png"/>