webpack+vue搭建教程

1、前提：安装node，npm，全局安装webpack

2、执行npm install -g cnpm --registry=https://registry.npm.taobao.org，之后用cnpm安装，从淘宝服务器下载

3、执行npm init -y ,创建package.json

4、安装组件，执行

cnpm install --save-dev webpack webpack-dev-server babel-core babel-loader vue vue-loader@14.2.3 vue-html-loader vue-template-compiler css-loader

tips:vue-loader版本问题比较多，用了14.0,3会报错，默认安装最新版本15也会报错，需要额外添加配置

// webpack.config.js
const { vueloaderplugin } = require('vue-loader')

module.exports = {
// ...
plugins: [
new vueloaderplugin()
]
}

我这里用了14.2.3，不用添加配置，直接可以使用

5、添加文件

根目录下新建webpack.config.js

//webpack.config.js

const webpack = require('webpack');

module.exports = {

entry: __dirname + "/src/main.js",//唯一入口文件

output: {

path: __dirname + "/dist",//打包后的文件存放的地方

filename: "bundle.js"//打包后输出文件的文件名

},

devserver: {

contentbase: "./",//本地服务器所加载的页面所在的目录

historyapifallback: true,//不跳转

inline: true//实时刷新

},

module: {

rules: [

//解析vue后缀文件

{test: /\.vue$/, loader: 'vue-loader'},

//用babel解析js文件 排除模块安装目录的文件

{test: /\.js$/, loader: 'babel-loader',exclude: /node_modules/}

]

}

}

根目录下新建index.html

 

<script src="dist/bundle.js"></script>

根目录下新建文件夹src，存放main.js和vue组件

//main.js

import vue from 'vue';

import app from './app.vue';



new vue({

el:'#app',

components: {app},

render: h => h(app),

mounted:function(){console.log(‘hello world’)}

})

//app.vue

hello world!!
 



<script>

export default{

name:"app"

}

</script>

根目录下新建文件夹dist，存放编译好的js文件

执行webpack命令，查看dist目录下是否生成了bundle.js

更改操作命令，package.json的scripts选项添加

"start": "webpack",

"server": "webpack-dev-server --open --mode development"

tips:start这个命令比较特殊，npm start就能执行，其他命令都需要npm run +具体命令才能执行，例如npm run server启动服务器,具体改成什么命令看个人喜好了

6、输入npm run server启动服务器，至此webpack基本功能已经实现。

修改main.js和vue文件，保存，发现服务器并没有热更新，查了下vue-loader已经集成这个功能，只需要webpack.config.js的output添加

publicpath: 'dist/'

，检测这个目录有变化就自动更新显示

loader种类还有很多，根据项目实际需要添加，例如sass-loader,less-loader,url-loader,file-loader,json-loader

抄了一句对loader的描述。loaders是webpack提供的最激动人心的功能之一了。通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的js文件（es6，es7)转换为现代兼容的js文件，对react的开发而言，合适的loaders可以把react的中用到的jsx文件转换为js文件。