1.开始
创建下面目录:
修改package.json:
- {
- "name": "vue",
- "version": "0.0.1",
- "description": "My vue",
- "author": "minixu",
- "dependencies": {
- "vue": "^1.0.26",
- "webpack": "^1.13.1"
- },
- "devDependencies": {
- "babel-core": "^6.1.2",
- "babel-loader": "^6.1.0",
- "babel-plugin-transform-runtime": "^6.1.2",
- "babel-preset-es2015": "^6.1.2",
- "babel-preset-stage-0": "^6.1.2",
- "babel-runtime": "^5.8.0",
- "css-loader": "^0.23.0",
- "style-loader": "^0.13.0",
- "vue-html-loader": "^1.2.3",
- "vue-loader": "^7.3.0",
- "webpack": "^1.13.1",
- "webpack-dev-server": "^1.14.1"
- }
- }
加载依赖模块:
如果实在下载不下来建议使用cnpm进行下载:
配置webpack.config.js:
-
- module.exports = {
-
- entry: './src/main.js',
-
- output: {
-
- path: './dist',
-
- filename: 'build.js',
- },
-
- module: {
- loaders: [{
- test: /\.vue$/,
- exclude: /node_modules/,
- loader: 'vue-loader'
- }, {
- test: /\.css$/,
- exclude: /node_modules/,
- loader: 'style-loader!css-loader'
- }, {
- test: /\.js$/,
- exclude: /node_modules/,
- loader: 'babel'
- }]
- },
- babel: {
- presets: ['es2015', 'stage-0'],
- plugins: ['transform-runtime']
- }
- }
在Vue根目录下创建index.html:
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- </head>
- <body>
- <App></App>
- <script src="dist/build.js"></script>
- </body>
- </html>
在src目录下创建main.js文件:
-
- import Vue from 'vue'
- import App from './views/index.vue'
-
-
- new Vue({
- el: 'body',
- components: { App }
- })
在src/views目录下创建index.vue:
- <pre name="code" class="javascript"><template>
- <p>{{ message }}</p>
- <input v-model="message">
- </template>
-
-
- <script>
- export default{
- data(){
- return {
- message: 'Hello Vue.js!'
- }
- }
- }
- </script>
我们所有需要的文件都准备好了,进行打包:
cmd到文件根目录输入 webpack:
打开index.html:
成功!
2.热加载
我们在上篇webpack中讲了一下热加载,现在我们运用到这个项目上来。
我们在package.json中已经依赖了webpakc-dev-server模块,所以我们直接使用
看到启动成功
我们修改代码试试:
index.vue:
- <template>
- <p>{{ message }}</p>
- <input v-model="message">
- <button v-on:click="reverseMessage">Reverse Message</button>
- </template>
-
- <script>
- export default{
- data(){
- return {
- message: 'Hello Vue.js!'
- }
- },
- methods: {
- reverseMessage: function () {
- this.message = this.message.split('').reverse().join('')
- }
- }
- }
- </script>
发现不管是刷新页面还是重启服务都没用。
那我们试试打包:
成功了????????
我们知道打包方式是生成文件到磁盘中 ,而热加载方式是生成文件到内存中。
查下官网关于Webpack-dev-server,发现配置是这样的
- var path = require("path");
- module.exports = {
- entry: {
- app: ["./app/main.js"]
- },
- output: {
- path: path.resolve(__dirname, "build"),
- publicPath: "/assets/",
- filename: "bundle.js"
- }
- };
因为我们的index.html中 的路径为dist/build.js
而内存中生成的bulid.js文件路径是不在dist文件夹下的,所以是找不到内存中的bulid.js的,找到的是在改文件夹下我们以前打包的文件。
不信删掉dist/bulid.js试试 。
所以我们需要指定一个 publicPath
修改我们的webpack.config.js:
-
-
- entry: './src/main.js',
-
- output: {
-
- path: './dist',
-
- filename: 'build.js',
- publicPath: '/dist/'
- },
- module: {
- loaders: [{
- test: /\.vue$/,
- exclude: /node_modules/,
- loader: 'vue-loader'
- }, {
- test: /\.css$/,
- exclude: /node_modules/,
- loader: 'style-loader!css-loader'
- }, {
- test: /\.js$/,
- exclude: /node_modules/,
- loader: 'babel'
- }]
- },
- babel: {
- presets: ['es2015', 'stage-0'],
- plugins: ['transform-runtime']
- }
- }
再启动一次
访问http://localhost:8080/webpack-dev-server/
修改index.vue
- <template>
- <p>{{ message }}</p>
- <p> {{ message.split('').reverse().join('') }}</p>
- <input v-model="message">
- <button v-on:click="reverseMessage">Reverse Message</button>
- </template>
-
- <script>
- export default{
- data(){
- return {
- message: 'Hello Vue.js!'
- }
- },
- methods: {
- reverseMessage: function () {
- this.message = this.message.split('').reverse().join('')
- }
- }
- }
- </script>
点开刚刚的页面,哇塞,不用重启不用刷新就变了,好神奇!