前言
最近搞 vue+webpack,vue 的 API 还是比较容易懂的, 每次 build 很复杂, 这里就介绍下热启动调试吧, 心累~~~
ITDogFire -sky
工具及目录
所用的到的简单工具 webstorm +vue +webpack +express, 小项目都是官方 down 下来的.
目录介绍如下
- package
- {
- "name": "yx",
- "version": "1.0.0",
- "description": "A sample Node.JS App using Express 4",
- "main": "server.JS",
- "scripts": {
- "build": "webpack --config ./build/webpack.dev.conf.JS --progress",
- "dev": "webpack --watch",
- "start": "node server.JS"
- },
- "keywords": [
- "node",
- "express"
- ],
- "license": "MIT",
- "dependencies": {
- "babel-core": "^6.10.4",
- "babel-loader": "^6.2.5",
- "babel-plugin-transform-runtime": "^6.12.0",
- "babel-polyfill": "^6.2.0",
- "babel-preset-es2015": "^6.13.2",
- "babel-preset-es2015-rollup": "^1.1.1",
- "babel-preset-react": "^6.11.1",
- "babel-preset-stage-0": "^6.5.0",
- "babel-preset-stage-2": "^6.1.18",
- "babel-preset-stage-3": "^6.11.0",
- "babel-runtime": "^6.0.0",
- "body-parser": "1.12.3",
- "Bootstrap": "~3.3.6",
- "busboy": "~0.2.12",
- "casperjs": "^1.1.0-beta5",
- "chai": "^3.4.1",
- "connect": "~3.4.0",
- "connect-busboy": "~0.0.2",
- "cookie-parser": "^1.3.5",
- "cookie-session": "2.0.0-alpha.1",
- "CSS-loader": "^0.23.1",
- "debug": "~2.0.0",
- "ejs": "2.3.1",
- "ejs-compiled-loader": "^2.1.1",
- "ejs-loader": "^0.3.0",
- "express": "4.12.3",
- "extract-text-webpack-plugin": "^1.0.1",
- "file-loader": "^0.9.0",
- "glob": "^7.0.5",
- "html-loader": "^0.4.3",
- "HTML-webpack-plugin": "^2.22.0",
- "jQuery": "^3.1.0",
- "jsx-loader": "^0.13.2",
- "jwt-simple": "^0.5.0",
- "leanengine": "^1.1.0",
- "Less": "^2.7.1",
- "Less-loader": "^2.2.3",
- "mocha": "^2.3.4",
- "multiparty": "~4.1.2",
- "node-xlsx": "~0.6.0",
- "phantomjs-prebuilt": "^2.1.7",
- "react": "^15.3.1",
- "react-dom": "^15.3.1",
- "react-router": "^2.7.0",
- "request": "2.65.0",
- "rollup": "^0.32.0",
- "rollup-plugin-babel": "^2.4.0",
- "sinon": "^1.17.3",
- "sinon-chai": "^2.8.0",
- "style-loader": "^0.13.1",
- "todomvc-App-CSS": "^2.0.3",
- "uglify-JS": "^2.6.2",
- "Underscore": "~1.8.3",
- "url-loader": "^0.5.7",
- "vue": "^2.0.0-alpha.7",
- "vue-loader": "^9.0.3",
- "vue-hot-reload-API": "^1.2.0",
- "vue-HTML-loader": "^1.0.0",
- "vue-style-loader": "^1.0.0",
- "webpack-dashboard": "^0.1.8",
- "wechat": "^2.0.3",
- "wechat-API": "^1.28.0",
- "weex-html5": "^0.3.2",
- "weex-loader": "^0.3.0",
- "webpack": "^1.13.2",
- "webpack-dev-middleware": "^1.4.0",
- "webpack-dev-server": "^1.14.1",
- "webpack-hot-middleware": "^2.6.0",
- "webpack-merge": "^0.8.3",
- "eslint": "^2.2.0",
- "eslint-config-vue": "^1.0.0",
- "eslint-friendly-formatter": "^2.0.6",
- "eslint-loader": "^1.2.0",
- "eventsource-polyfill": "^0.9.6"
- },
- "engines": {
- "node": "4.x"
- }
- }
- base.conf
- var path = require('path'),
- webpack = require('webpack');
- // var hotMiddlewareScript = 'webpack-hot-middleware/client?reload=true';
- module.exports = {
- entry: {
- test1: './views/vue/test1/test1.JS',
- cart: './views/vue/shopping-cart/main.JS',
- // 框架 / 类库 单独打包
- vendor: [
- 'vue',
- //'vue-router',
- //'vue-resource',
- //'lodash',
- //'superagent'
- ]
- },
- output: {
- path: path.resolve(__dirname, '../public/dist/static'),
- publicPath:path.resolve(__dirname, '../public/dist/static'),
- filename: '[name]/build.JS',
- },
- resolve: {
- extensions: ['','.JS','.vue','.Less','Sass'],
- //alias: {
- // src: path.resolve(__dirname, '../src'),
- // // 自定义路径别名
- // COMPONENT: path.resolve(__dirname, '../src/components'),
- // SERVICE: path.resolve(__dirname, '../src/services'),
- // VIEW: path.resolve(__dirname, '../src/views')
- //}
- },
- resolveLoader: {
- root: path.join(__dirname, 'node_modules')
- },
- module: {
- loaders: [{
- test: /\.vue$/,
- loader: 'vue'
- }, {
- test: /\.JS$/,
- loader: 'babel',
- exclude: /node_modules|vue\/dist|vue-hot-reload-API|vue-loader/
- }, {
- test: /\.JSON$/,
- loader: 'JSON'
- }, {
- test: /\.Less$/,
- loader: 'CSS!Less'
- }, {
- test: /\.(PNG|jpg|gif|svg)$/,
- loader: 'url',
- query: {
- limit: 10000,
- name: '[name].[ext]?[hash]'
- }
- }, {
- test: /\.(eot|woff|ttf|svg)$/,
- loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
- }, {test: /\.ejs$/, loader: 'ejs-compiled?htmlmin'},
- {
- test: /\.SCSS$/,
- loaders: ["style", "CSS", "Sass"]
- }]
- },
- vue: {
- loaders: {
- JS: 'babel',
- Less: 'vue-style!CSS!Less',
- Sass: 'vue-style!CSS!Sass'
- }
- },
- //eslint: {
- // formatter: require('eslint-friendly-formatter')
- //},
- plugins: [
- // new webpack.optimize.CommonsChunkPlugin({
- // names: ['vendor', 'mainifest']
- // })
- ]
- };
- dev.conf
- var webpack = require('webpack'),
- config = require('./webpack.base.conf');
- config.devtool = 'eval-source-map';
- // add hot-reload related code to entry chunk
- config.entry.cart = [
- 'eventsource-polyfill',
- 'webpack-hot-middleware/client?reload=true',
- config.entry.cart
- ];
- config.plugins = (config.plugins || []).concat([
- new webpack.optimize.OccurenceOrderPlugin(),
- new webpack.HotModuleReplacementPlugin(),
- new webpack.NoErrorsPlugin(),
- ]);
- module.exports = config;
启动文件 App.JS
- //webpack
- var webpack = require('webpack'),
- // favicon = require('express-favicon'),
- config = require('./build/webpack.dev.conf');
- var compiler = webpack(config);
- App.use(require('webpack-dev-middleware')(compiler, {
- noInfo: true,
- publicPath: config.output.publicPath,
- stats: {
- colors: true
- }
- }));
- // enable hot-reload and state-preserving
- // compilation error display
- App.use(require('webpack-hot-middleware')(compiler));
这里只是简单配置, mark 一下, 可以自己刷新了!
来源: http://www.jb51.net/article/147693.htm