Webpack是一个模块打包器(bundler)。 在Webpack看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理，它将根据模块的依赖关系进行静态分析，生成对应的静态资源 四个核心概念：
Entry：入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。Output：output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。Loader：loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只能解析： JavaScript、json）。Plugins：插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。关于Loader：
Webpack 本身只能加载JS/JSON模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader 进行转换/加载Loader 本身也是运行在 node.js 环境中的 JavaScript 模块它本身是一个函数，接受源文件作为参数，返回转换的结果loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 json-loader。关于Plugins：
插件件可以完成一些loader不能完成的功能。插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。CleanWebpackPlugin: 自动清除指定文件夹资源HtmlWebpackPlugin: 自动生成HTML文件UglifyJSPlugin: 压缩js文件webpack.config.js : 是一个node模块，返回一个 json 格式的配置信息对象
官方文档
1、 生成package.json文件
npm init //初始化（在对应的文件中）2、安装webpack（都要安装）：
npm install webpack -g //全局安装 npm install webpack --save-dev //局部安装3、执行命令：
webpack src/js/index.js build/index.js //webpack会把es6的模块化语法编译成浏览器能够识别的语言。4、package配置：
"scripts": { "build": "webpack" },打包应用运行:npm run build
webpack的核心配置文件：执行webpack命令时，会在当前目录查找webpack.config.js文件读取配置
entry：入口文件，将所有打包资源全部引入output：输出文件，将资源输出到指定目录下loader：处理webpack不能够解析的模块plugins：执行loader做不了的任务 const path = require('path'); //path内置的模块，用来设置路径。 module.exports = { entry:'./src/js/index.js', //入口（从哪里进入开始解析） output: { //出口（最终加工完的代码输出到哪里） path: path.resolve(__dirname, 'build'),//输出文件路径配置 filename: 'index.js',// 输出文件名 } };使用less-loader处理less文件：
安装：npm install less-loader less --save-D安装：npm install css-loader style-loader --save-D向rules中写入配置： { test: /\.less$/, use: [{ loader: "style-loader" // 创建一个style标签，将js中的css放入其中 }, { loader: "css-loader" // 将css以CommonJs语法打包到js中 }, { loader: "less-loader" // 将less转换成css }] }在入口js中引入less文件：import ‘…/less/test.less’;(为了让打包时使用此文件)
使用file-loader处理图片资源：
安装：npm install --save-dev file-loaderloader： { test: /\.(png|jpg|gif)$/, use: [ { loader: 'file-loader', //如果不做图片转base64，可以用file-loader options: { outputPath:'img', //图片最终输出的位置 publicPath:'../build/img',//css资源图片路径 name:'[hash:5].[ext]'//修改图片名称 } } ] }使用url-loader处理图片资源
安装：npm install url-loader --save-Dloader： { test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', //如果不做图片转base64，可以用file-loader options: { limit: 8192, //设置文件的最大的大小，大于8KB不转换，小于8KB转成base64 outputPath:'img', //图片最终输出的位置 publicPath:'../build/img',//css资源图片路径 name:'[hash:5].[ext]' //修改图片名称 } } ] }js语法检查
安装jshint-loader： npm i jshint-loader --save -D npm i jshint --save -D 新增loader： { test: /\.js$/, // 涵盖 .js 文件 enforce: "pre", // 预先加载好 jshint loader exclude: /node_modules/, // 排除掉 node_modules 文件夹下的所有文件 use: [ { loader: "jshint-loader", options: { //jslint 的错误信息在默认情况下会显示为 warning（警告）类信息 //将 emitErrors 参数设置为 true 可使错误显示为 error（错误）类信息 emitErrors: false, //jshint 默认情况下不会打断webpack编译 //如果你想在 jshint 出现错误时，立刻停止编译 //请设置 failOnHint 参数为true failOnHint: false } } ] }es6转es5
安装babel-loader： npm install babel-loader babel-core babel-preset-es2015 --save -D npm i babel-loader@7 --save -D loader： { test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['es2015'] } } }提取css,合并为单独的文件
安装ExtractTextWebpackPlugin插件： npm install extract-text-webpack-plugin --save-D 引入插件： const ExtractTextPlugin = require("extract-text-webpack-plugin"); 新增plugins插件配置项，并实例化ExtractTextPlugin插件： plugins: [ //提取css为单独文件 new ExtractTextPlugin("./css/index.css"), ] 修改原less-loader的配置如下： { test: /\.less$/, //匹配文件的规则，说明该loader对哪个文件生效 use: ExtractTextPlugin.extract({ fallback: "style-loader", use: ["css-loader","less-loader"] }) }注：因为css提取成单独文件，不再包含在js中了，所以要修改url-loader配置publicPath:’…/build/img’ html文件的处理和清除文件夹（插件HtmlWebpackPlugin）
安装： npm install --save-dev html-webpack-plugin 引入插件： var HtmlWebpackPlugin = require('html-webpack-plugin'); 新增一个插件配置项： new HtmlWebpackPlugin({ title:"webpack", filename:"index.html", template:"./src/index.html" }) 备注：要在html模板中写入<title><%= htmlWebpackPlugin.options.title %></title>，title配置才生效 删除掉模板html中的所有引入为了清空工作目录，安装插件(clean-webpack-plugin)： npm i clean-webpack-plugin -D 引入插件： new CleanWebpackPlugin('./build') 备注：最新版的CleanWebpackPlugin不传任何参数注：如果发现build文件夹出现在了config中，解决办法如下：
修改出口output中的path为： resolve(__dirname, '../build')