前端工具配置-webpack4.x

webpack打包工具功能:

处理js兼容问题
对项目性能优化
代码压缩
代码支持模块化开发

webpack基本使用

安装:

npm i webpack webpack-cli

配置：项目根目录下, 配置webpack.config.js文件:

module.exports = {
      mode: 'development', // production  --> 开发模式
};
其他使用
package.json中:
"scripts": {
    "dev": "webpack"
}

命令行中打包命令:

npm run dev进行打包(入口文件一般是index.js)

配置webpack 自动打包 --> 虚拟的服务器(webpack-dev-server), 自动打包同时刷新浏览器

安装:

npm i webpack-dev-server -D

配置命令行命令别名: 修改package.json中scripts中的命令

"scripts": {
     "dev": "webpack-dev-server"
 },

配置: 自动打开浏览器: package.json中

"scripts": {
      "dev": "webpack-dev-server --open"
 },

配置: 指定自动打开浏览器的host 和 port

"scripts": {
     "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
 },

配置生成预览页