Webpack3.x入门篇——webpack.config配置

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