【webpack4.0】---webpack的基本使用(三)

一、webpack-dev-server

1、安装

cnpm   install  webpack-dev-server  -D

2、作用

开启一个web服务，监听文件的变化并自动刷新网页，做到实时预览。支持 Source Map，以方便调试

3、基本使用

devServer:{
   contentBase:path.join(__dirname,"dist"),
   host:"127.0.0.1"
   open:true,
   proxy:{
       "/api":{
           target:"http://www.baidu.com",
           changeOrigin:true
      }
  },
   prot:8080
}

• contentBase:本地服务器加载页面的目录

• host:指定使用的主机地址

• hot:热模块替换

• hotOnly:在没有页面刷新的情况下启用热模块替换

• open:告诉dev-server在服务器启动后打开浏览器。将其设置true为打开默认浏览器。

• proxy:代理 服务器代理跨域

• prot:设置端口号

二、热模块更新 (Hot Module Replacement)

1、作用

假设当我们的模块样式发生改变的时候只需要更新css即可，不需要将整个页面进行重新加载。方便用于调试css

2、基本使用

constwebpack=require("webpack");
module.exports ={
   devServer:{
       contentBase:"./dist",
       open:true,
       port:8080,
       hot:true,//开启Hot Module Replacement
       hotOnly:true
  },
   plugins:[
       newwebpack.HotModuleReplacementPlugin()//webpack自带的插件
  ]
}

三、sourceMap配置(问题)

sourceMap是一个映射关系，它会将我们打包后的文件出错的部分对应打包前文件出错的部分，这样对于我们的代码调试是非常方便的

sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术

注意如果配置了sourceMap后打包的速度回变慢

module.exports={
   devtool:"none"//关闭
   devtool:"source-map"
   devtool:"inline-source-map"//会将映射的文件已字符串的形式放入打包文件中
}

module.exports={
   devtool:"cheap-module-eval-source-map",//dev环境
   devtool:"cheap-module-source-map",//线上环境
}

inline:会将映射的文件已 字符串的形式放入打包文件中去

cheap:只会负责业务代码中的错误，不会负责node_modules中的错误

module:可以让source负责node_modules中的错误

四、resolve

Webpack 在启动后会从配置的入口模块出发找出所有依赖的模块，Resolve 配置 Webpack 如何寻找模块所对应的文件。Webpack 内置 JavaScript 模块化语法解析功能，默认会采用模块化标准里约定好的规则去寻找，但你也可以根据自己的需要修改默认的规则

alias

配置项通过别名来把原导入路径映射成一个新的导入路径

resolve:{
 alias:{
   components: path.join(__dirname,'./src/components/')
}
}

extensions

在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试访问文件是否存在。resolve.extensions 用于配置在尝试过程中用到的后缀列表，默认是['.js', '.json']

也就是说当遇到 require('./data')  这样的导入语句时，Webpack 会先去寻找  ./data.js文件，如果该文件不存在就去寻找./data.json 文件， 如果还是找不到就报错

resolve: {
       extensions: ['.ts', '.tsx', '.js'],
     
},

五、webpack-merge

分离配置文件

我们在根目录下创建config文件夹，并创建四个配置文件：

• webpack.comm.js 公共环境的配置文件

• webpack.development.js 开发环境下的配置文件

• webpack.production.js 生产环境下的配置文件

• webpack.parts.js 各个配置零件的配置文件

如果配置文件被分成了许多不同的部分，那么必须以某种方式来组合他们，通常就是合并数组和对象，webpack-merge很好的做到了这一点。

webpack-merge做了两件事：它允许连接数组并合并对象，而不是覆盖组合

安装

cnpminstallwebpack-merge--save-dev

设置各个配置文件的连接

constbaseWebpackConfig=requie("./config/base.config.js");
constwebpackMerge=require('webpack-merge');
constwebpackConfig=webpackMerge(baseWebpackConfig, {
 
})

module.exports=webpackConfig

​