webpack 4的使用(安装与简单的配置文件设置)

webpack是前端项目构建工具,具有模块化,解决兼容性等优点

当请求服务器得到页面资源时
由于页面中会有许多的href,src…等请求,就会增加静态资源的请求次数,使加载变慢

webpack会把这些静态资源打包到一个文件(入口文件)中(css,js,图片,字体图标…),
并且将es6的代码转化es5

页面初始化
建立项目根目录文件夹
在文件夹下初始化

npm init -y

先安装

npm install webpack webpack-cli -D

-D代表是开发依赖上线不需要

构建文件结构
入口文件(index.js)一般放在src下
dist中放置打包好的文件

无配置文件时

webpack	打包文件路径 -o 	打包到的文件路径

如果只用webpack运行那就默认把src下的index.js打包到dist/main.js

当然了只用webpack命令时只有默认的单一选项,而每次在命令行输入
webpack 打包文件路径 -o 打包到的文件路径,又太麻烦,这就有一个一劳永逸的方法
设置配置文件

接下来就是webpak的配置

文件名默认必须为webpack.config.js
在配置文件中要指定它的要打包文件,与出口文件的文件夹及文件名

var path = require('path')
module.exports = {
    mode: 'development',//webpack4新增的,development,production
    entry: path.join(__dirname, './src/index.js'),
    output: {
        path: path.reslove(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}

当然命令也不只是在命令行输入webpack
可以把package.json文件中的scripts脚本对象中添加

"scripts":{
	"dev":"webpack"
	}

这时在命令行输入下面代码也能实现入口文件的打包

npm run dev