webpack搭建

需要处理的文件类型
开发文档： https://www.webpackjs.com/concepts/
（一）
Html： html-webpack-plugin 脚本： babel+bale-preset-react
样式：css-loader+sass-loader
图片/字体：url-loader+file-loader

（二）
html-webpack-plugin： html单独打包成文件
extract-text-webpack-plugin:样式打包成单独文件
commonsChuncPlugin,提出通用模块，webpack自带的

（三）
webpack-dev-server:
为webpack项目提供web服务，更改代码自动刷新，做代理
启动：node_modules/.bin/webpack

搭建流程
（1）npm i webpack@3.10.0 --dev
(2)新建src入口文件夹以及app.js文件，dist出口文件夹；
新建 webpack.config.js 基本配置如下：

const path = require("path");

module.exports = {
  entry: "./src/app.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "app.js"
  },
  resolve: {
    alias: {
      page: path.resolve(__dirname, "src/page")//配置公共地址
    }
  },
};

（3）所需基本插件（安装）
1，html-webpack-plugin
npm i html-webpack-plugin@2.30.1 --dev

const path = require("path");
// 安装start
const HtmlWebpackPlugin = require("html-webpack-plugin");----------------------add
// 安装end
module.exports = {
  entry: "./src/app.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "app.js"
  },
  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })]--------add，其中默认的输出就是src下新建的index.html文件
};

2,脚本