"less": "^2.7.3",
"less-loader": "^4.0.5",
"style-loader": "^0.19.0",
"url-loader": "^0.6.2",
"vue": "^2.5.9",
"vue-hot-reload-api": "^2.2.4",
"vue-html-loader": "^1.2.4",
"vue-loader": "^13.5.0",
"vue-router": "^3.0.1",
"vue-style-loader": "^3.0.3",
"vue-template-compiler": "^2.5.9",
"vuex": "^3.0.1",
"webpack": "^3.9.1",
"webpack-dev-server": "^2.9.5"
}
}
这些依赖的用处分别都是啥，自己查。
3.执行npm install，下载这些依赖包。
4.新建2个文件夹：dist和src，名字按照个人习惯吧。我习惯dist代表发布时的目录，src是开发目录。dist里面的js是到时候通过webpack打包后的文件。待会只会提交dist目录到npm官网上，src不提交。
src里：我们比较常规的写一个vue组件
样式就不说了，照常写。
app.vue(写法上也很常规):
<style scoped lang="less">
@import 'styles/common.less';
</style>
<template>
<div class="msg-wrapper">
<span>hello!</span>
<span class="account">{{data.name}}</span>
</div>
</template>
<script>
export default {
name:'Msg',
data () {
return {}
},
props:{
data:{
type:Object
}
},
methods: { },
created(){
let that = this;
}
}
</script>
index.js(这里的写法就与普通vue项目有所不同了，主要要把它export出去)：
import Msg from './app.vue'
export default Msg;5.加入webpack打包配置，并把src中的内容打包进dist目录内：
根目录下新增weppack.config.js文件
const path = require("path");
const webpack = require("webpack");
const uglify = require("uglifyjs-webpack-plugin");module.exports = {
devtool: 'source-map',
entry: "./src/index.js",//入口文件，就是上步骤的src目录下的index.js文件，
output: {
path: path.resolve(__dirname, './dist'),//输出路径，就是上步骤中新建的dist目录，
publicPath: '/dist/',
filename: 'helloMsg.min.js',
libraryTarget: 'umd',
umdNamedDefine: true
},
module: {
rules: [{
test: /.vue$/,
loader: 'vue-loader'
},
{
test: /.less$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "less-loader" }
] },
{
test: /.js$/,
exclude: /node_modules|vue/dist|vue-router/|vue-loader/|vue-hot-reload-api//,
loader: 'babel-loader'
},
{
test: /.(png|jpg|gif|ttf|svg|woff|eot)$/,
