詳解用webpack2.0構(gòu)建vue2.0超詳細(xì)精簡(jiǎn)版

2019-11-19 16:55:44

字體：大中小

供稿：網(wǎng)友

npm init -y 初始化項(xiàng)目

安裝各種依賴項(xiàng)

npm install --save vue 安裝vue2.0

npm install --save-dev webpack@^2.1.0-beta.25 webpack-dev-server@^2.1.0-beta.9 安裝webpack以及webpack測(cè)試服務(wù)器，默認(rèn)安裝是1.0版本的，所以必須指定版本號(hào)

npm install --save-dev babel-core babel-loader babel-preset-es2015 安裝babel，一般的瀏覽器是不認(rèn)識(shí)es6語法的，babel的作用是將es6的語法編譯成瀏覽器認(rèn)識(shí)的語法

npm install --save-dev vue-loader vue-template-compiler 用來解析vue的組件，.vue后綴的文件

npm install --save-dev css-loader file-loader 用來解析css

編寫頁面

新建目錄src，里面新建App.vue

<!-- 簡(jiǎn)單寫個(gè)title和一個(gè)循環(huán) --><template>  <div id="example">    <h1>{{ msg }}</h1>    <ul>      <li v-for="n in 5">{{ n }}</li>    </ul>  </div></template><script>export default {  data () {    return {      msg: 'Hello World!'    }  }}</script><style scoped>#example {  background: red;  height: 100vh;}</style>

在src目錄下新建main.js

/* 引入vue和主頁 */import Vue from 'vue'import App from './App.vue'/* 實(shí)例化一個(gè)vue */new Vue({ el: '#app', render: h => h(App)})

配置webpack

在根目錄下新建webpack.config.js

/* 引入操作路徑模塊和webpack */var path = require('path');var webpack = require('webpack');module.exports = {  /* 輸入文件 */  entry: './src/main.js',  output: {    /* 輸出目錄，沒有則新建 */    path: path.resolve(__dirname, './dist'),    /* 靜態(tài)目錄，可以直接從這里取文件 */    publicPath: '/dist/',    /* 文件名 */    filename: 'build.js'  },  module: {    rules: [      /* 用來解析vue后綴的文件 */      {        test: //.vue$/,        loader: 'vue-loader'      },      /* 用babel來解析js文件并把es6的語法轉(zhuǎn)換成瀏覽器認(rèn)識(shí)的語法 */      {        test: //.js$/,        loader: 'babel-loader',        /* 排除模塊安裝目錄的文件 */        exclude: /node_modules/      }    ]  }}

打包項(xiàng)目

npm install -g webpack@^2.1.0-beta.25 全局安裝webpack，以便使用webpack命令

webpack 用webpack命令打包項(xiàng)目，這是目錄下會(huì)多出一個(gè)dist文件夾，查看里面會(huì)有build.js，發(fā)覺里面的es6語法已經(jīng)被轉(zhuǎn)化了

最終項(xiàng)目目錄如圖所示

在根目錄下新建index.html，引入build.js

<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><title>vue-webpack</title></head><body>  <section id="app"></section>  <script src="./dist/build.js"></script></body></html>

頁面如圖所示