如图,进入自己写好的组件目录
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 暴漏出去;