Webpack简介
webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成少量的 bundle - 通常只有一个,由浏览器加载。
它是高度可配置的,但是,在开始前你需要先理解四个核心概念:入口(entry)、输出(output)、loader、插件(plugins)。 —— [ webpack中文官网 ]
Webpack环境配置
nodeJs环境安装
1、安装node.js,请至nodejs.cn下载最新nodejs版本—— [nodeJS官网链接]
2、nodejs安装教程网上有很多,这里就不赘述了,推荐查看—— [Node.js 安装配置]
Webpack环境安装
1、这里我们使用npm包进行webpack安装环境配置
npm install -g–save webpack //全局安装webpack
2、webpack插件安装
html-webpack-plugin
npm install -g–save html-webpack-plugin //安装html-webpack-plugin用于压缩HTML代码
html-loader
npm install -g–save html-loader//安装html-loader用于解析HTML代码
glob
npm install -g–save glob//用于对文件的路径进行处理
类似还有相关插件
webpack-dev-server
babel
babel-core
babel-loader
babel-preset-es2015
babel-runtime
less-loader
uglify-js
url-loader
css-loader
less-loader
sass-loader
….
这里就不在赘述,依照上面逐个npm即可
Webpack实战Demo演示
常见项目路径
-
biz(源码文件夹)
- index(html,less,js….)
- login
- ……. dist(用于存放压缩后文件)
- css
- font
- image