使用webpack打包一个‘es6’语法组件库，在浏览器可以使用；

如图，进入自己写好的组件目录

1：初始化并引入webpack（安装好node）

npm init -y
npm install webpack webpack-cli --save-dev

2：创建webpack.config.js并编辑：

const path = require('path');
module.exports = {
    entry: './index.js',//入口文件
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js'//打包后生成的主文件；浏览器script标签引入；
    },
    module: {
        rules:[
            {test: /\.js$/, use: 'babel-loader' },
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
            {test: /\.(png|svg|jpg|gif|jpeg)$/, use: ['file-loader']},
            {test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader']},
            {test: /\.(csv|tsv)$/, use: ['csv-loader']},{test: /\.xml$/, use: ['xml-loader']}]
    }
};

3：创建并配置.babelrc文件

{
  "presets": [
    "es2015"
  ],
  "plugins": []
}

4：下载相关依赖

npm install babel
npm install babel-cli
npm install babel-core
npm install babel-loader
npm install babel-preset-es2015

5：继续下载依赖（可见webpack官方）

npm install --save-dev style-loader css-loader //作用可以直接在js中引入import css--在js中impor index.css（index.css是所有@import其他的css）

npm install --save-dev file-loader //图片 字体 等

npm install --save-dev csv-loader xml-loader //数据；

6：package.json中 scripts 中加入： "build": "webpack"

7：npm run build 即打包生成了 dist文件 项目中 引入 其中的 index.js即可；

8：注意事项 因为浏览器最终还是不能完美使用import 等语句 所以：

import "./index.css"
import layer from "./modules/layer/index.js"
import hoverTips from "./modules/hoverTips/index.js"
const ys = {
    layer,
    hoverTips
}
window.ys=ys;//方便浏览器调用//
export default ys

最终 我们 最好 将ys用 window 暴漏出去；