Webpack安装配置及打包详细过程
引言
前端经过漫长的发展,涌现出了很多实践方法来处理复杂的工作流程,让开发变得更加简便,其中,模块化可以使复杂的程序细化成为各个小的文件,而webpack并不强制你使用某种模块化方案,而是通过兼容所有模块化方案让你无痛接入项目,本文详细介绍webpack安装配置及打包的详细过程。
webpack简单介绍
本质上,webpack 是一个现代 javascript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
其中包含四个核心概念
- 入口(entry):指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的
- 输出(output):告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为
./dist
- loader:让 webpack 能够去处理那些非 javascript 文件(webpack 自身只理解 javascript)
- 插件(plugins):插件则可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。功能极其强大,可以用来处理各种各样的任务。
通过官网的一张图,可以说明webpack的强大,如下所示:
打包步骤
接下来详细介绍webpack安装配置及打包的详细过程
安装node.js
可以参考上篇博客node.js安装详细步骤教程(windows),这里不再重复书写。
全局安装webpack
运行cmd,安装命令如下所示,其中, -g是全局安装,并移除安装了 webpack和webpack-cli
npm install webpack webpack-cli –g
创建本地项目文件夹
创建项目本地文件夹,如“d:\testwebpack”,在cmd命令窗中分别输入如下命令,切换到该目录
d: //切换到d盘 cd d:\testwebpack //切换到项目目录
本地安装webpack
输入如下命令,在项目目录中安装webpack,其中,--save-dev是本地安装
npm install webpack webpack-cli --save-dev
查看webpack 版本
输入如下命令,若出现版本号,说明安装成功。
webpack -v
创建package.json文件
输入如下命令,将在项目目录中自动生成package.json文件
npm init -y
配置打包目录
在项目目录下,新建config文件夹,用于存放配置文件;src文件夹,用于存放源码;out文件夹,用于存放打包生成文件,具体如下图所示。
添加webpack.config.js文件
在config文件夹中添加webpack.config.js文件,并添加如下代码:
const path=require('path'); //调用node.js中的路径 module.exports={ entry:{ index:'./src/js/index.js' //需要打包的文件 }, output:{ filename:'[name].js', //输入的文件名是什么,生成的文件名也是什么 path:path.resolve(__dirname,'../out') //指定生成的文件目录 }, mode:"development" //开发模式,没有对js等文件压缩,默认生成的是压缩文件 }
运行webpack
在cmd命令窗体中,输入如下命令,运行成功后,在out目录中会生成打包后的index.js
webpack --config config/webpack.config.js
配置package.json
每次输入命令webpack --config config/webpack.config.js,太长,且非常不方便,此时我们可以在package.json文件中配置,如下所示:
{ "name": "testwebpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"error: no test specified\" && exit 1", "start": "webpack --config config/webpack.config.js" }, "keywords": [], "author": "", "license": "isc", "devdependencies": { "clean-webpack-plugin": "^3.0.0", "webpack": "^4.39.3", "webpack-cli": "^3.3.8" } }
配置完成后,我们输入的如下命令,可以直接打包。
npm run start
js缓存问题的处理
通过哈希值解决js缓存问题(在没有修改js要打包的内容时,不会重新打包一个js文件),修改webpack.config.js文件,具体代码如下:
const path=require('path'); module.exports={ entry:{ index:'./src/js/index.js' }, output:{ filename:'[name].[chunkhash:8].js',//增加8位的哈希值 path:path.resolve(__dirname,'../out') }, mode:"development", }
安装webpack插件clean-webpack-plugin
通过clean-webpack-plugin插件删除输出目中之前旧的文件。
安装命令
npm install --save-dev clean-webpack-plugin
用法一
const path=require('path'); const {cleanwebpackplugin} = require('clean-webpack-plugin'); module.exports={ entry:{ index:'./src/js/index.js' }, output:{ filename:'[name].[chunkhash:8].js', path:path.resolve(__dirname,'../out') }, mode:"development", plugins:[ new cleanwebpackplugin() ] }
用法二
const path=require('path'); const cleanwebpackplugin = require('clean-webpack-plugin').cleanwebpackplugin ; module.exports={ entry:{ index:'./src/js/index.js' }, output:{ filename:'[name].[chunkhash:8].js', path:path.resolve(__dirname,'../out') }, mode:"development", plugins:[ new cleanwebpackplugin() ] }
配置完后,我们再次运行npm run start,此时out目录中,只有一个新生成的js文件,如下图所示。
总结
至此,我们完成从webpack安装、配置、打包等一系列步骤。以上详细步骤,全部经过笔者测试通过,如果在安装或使用过程中出现问题,欢迎留言交流,如果本文对你有所帮助,希望关注支持下。