前端之路② --webpack4学习（不断更新）

目录

 

1.webpack基础配置

#初始化项目

#安装本地webpack

#运行webpack命令进行打包

#使用VS插件code runner 

#手动配置webpack

#直接使用 npm run build 命令执行打包

#生成本地服务配置

#自动生成dist中的index.html文件 - 安装html-webpack-plugin插件

#生产环境下进行文件压缩

---

1.webpack基础配置

#初始化项目

    yarn init -y

---

#安装本地webpack

    yarn add webpack webpack-cli -D

    -D --当前为开发依赖 上线无效

---

#运行webpack命令进行打包

    npx webpack

    会自动生成dist-->main.js

---

#使用VS插件code runner 

在扩展程序中安装code runner插件，然后在指定文件，如main.js中，右键run code直接执行

---

#手动配置webpack

 - 默认配置名字 webpack.config.js

 - 手动指定配置文件名 

npx webpack --config 自定义配置文件名

---

#直接使用 npm run build 命令执行打包

在package.json中加入

  "scripts": {

    "build":"webpack --config webpack.config.js"

  },

---

#生成本地服务配置

    yarn add webpack-dev-server -D

 -开启服务(默认 http://localhost:8080/ 显示目录文件)

    npx webpack-dev-server  

 -在package.json-->scripts中配置

    "dev":"webpack-dev-server"

 -在webpack.config.js-->module.exports中添加配置

    devServer:{//开发服务器的配置

        port:3000,

        progress:true, //滚动条

        contentBase:'./dist' ,//静态服务目录

        compress:true //压缩

    },

 -运行

    npm run dev

    通过http://localhost:3000 打开dist-->index.html文件

---

#自动生成dist中的index.html文件 - 安装html-webpack-plugin插件

    yarn add html-webpack-plugin -D

 -在webpack.config.js中添加

    let HtmlpackPlugin = require('html-webpack-plugin')

 -在webpack.config.js-->module.exports中添加

     plugins:[ //数组，放着所有的webpack插件

        new HtmlpackPlugin({

            template:'./src/index.html', //模板文件，src下一个空html格式文件

            filename:'index.html' //生成的文件名

        })

    ]

 -重新打包

    npm run build

 -启动服务

    npm run dev

---

#生产环境下进行文件压缩

 -在webpack.config.js-->module.exports中

    --修改mode参数为production

    --plugins-->HtmlpackPlugin中添加

        minify:{

                removeAttributeQuotes:true,//去掉html标签中的双引号

                collapseWhitespace:true,//折叠空行

            },

            hash:true //为每个html增加hash戳

    --为生成的bundle.js文件名添加hash，在output->filename中添加

        filename:'bundle.[hash:8].js' //冒号后为hash位数