webpack4.x + vue2.x 構建前端工程化(1)

時間 2019-11-29

標籤 webpack4.x webpack vue2.x vue 構建前端工程简体版

原文原文鏈接

本篇文篇純屬我的筆記,實現工程化打包(用打包後的文件能夠正常渲染頁面),後續繼續更新配置開發環境與生產環境,若是有不合理的地方還望各位指點!css

不用腳手架，直接用vue和webpack搭建前端工程化項目

首先廢話很少說,上手就是幹 html

　　一、npm init -y //建立一個package.json文件 -y選擇默認的配置;前端

npm init -y

　　二、安裝webpack、webpack-cli webpack4以後就要另外安裝 webpack-cli 不然運行時會拋錯，到時候還得安裝vue

npm i webpack webpack-cli --save-dev

　　三、webpack安裝好了後，如今開始安裝 vue 、vue-loader webpack

npm i vue vue-loader --save-dev

　　安裝完後有個提示，說 vue-loader 依賴於 css-loader 但未安裝，因此還得安裝下 css-loader

　　npm i css-loader --save-devweb

　　四、新建基本的項目目錄文件 src。及打包的入口文件和相關引用的文件。npm

　　　　4.1，這三個頁面的代碼 json

1.app.vue

<template>
     <div class='test'>{{test}}</div>
</template>


<script>
export default {
     data(){
          return {
               test:"基本的項目依賴"
          }
     }
}
</script>

<style>
.test{
     color:red;
}
</style>

2.main.js

import Vue from 'vue'

import App from './app.vue'

new Vue({

el:'#app',

render: h => h(App)

})

3.index.html

<!DOCTYPE html>

<head>

<title>webpack app</title>

</head>

<body>

</body>

</html>

　　五、修改package.json 文件的 scripts 裏面的運行命令。前端工程化

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack --config config/webpack.config.base.js"      //使用本項目webpack 進行打包，定位到config目錄下的webpack.config.base.js  別忘了加 config/ ,否則打包時報錯 提示找到文件。。
  },

　　六、基本的兩大依賴已經安裝完後，如今開始寫 webpack 的配置文件了。。瀏覽器

　　　　1，在根目錄上新建個config文件夾，在文件夾裏新建一個 webpack.config.base.js 這個文件主要是存放生產環境與開發環境配置的共公信息。

　　　　2，在webpack.config.base.js 裏面寫打包的配置。

const path = require('path');

const config = {

　　　　context: path.resolve(__dirname, '../'),

entry:path.resolve(__dirname,'../src/main.js' ), //這裏的爲何上層目錄。。其實這跟你配置的 package.json 裏面的scripts 裏運行的路徑有關。

     output:{
          path: path.resolve(__dirname,'../dist'),
          filename:"js/[name]-app-[hash].js",
          publicPath:'./'
     },
     resolve:{
          alias:{
               'vue$':'vue/dist/vue.esm.js',
               '@':path.resolve(__dirname,"../src")
          }
     },
     module:{
          rules:[
               {
                    test:/\.vue$/,
                    loader:'vue-loader'
               },
               {
                    test:/\.css$/,
                    use:[
                         'css-loader'
                    ]
               },
               {
                    test:/\.(png|jpe?g|gif|svg)$/,
                    loader:'url-loader',
                    options:{
                         limit:1024,
                         name:'[name].[ext]-[hash]'
                    }
               }
          ]
     }
}

module.exports = config;

　　七、如今能夠運行項目了。npm run build 進行打包了。看下會報什麼錯，在填坑

　　　　果真踩坑了，看下是什麼提示。。。第一段說，vue-loader 依賴的 vue-template-compiler 未安裝。第二段 vue-loader 的插件未在webpack中配置。。第三段是基於前二段報的錯，類型不對。。

　　　　如今開始安裝 vue-template-compiler 和加上vue-loader插件配置。

npm i vue-template-compiler --save-dev

//配置vue-loader插件

　　const vueloaderplugin = require('vue-loader/lib/plugin')

　　在 module下面寫入插件的配置

plugins:[

new vueloaderplugin()

]

這兩個加完了後在 npm run build 打包看看

　　打包沒有報錯。並且目錄下多了一個dist目錄。。打開看一下

　　發現沒有主界面。根目錄下的 index.html 沒有打包進來。。。這光有js沒用啊。運行不了啊。怎麼辦呢，webpack 配置問題。。安裝html-webpack-plugin 插件

npm i html-webpack-plugin --save-dev

　　webpack配置中新加入這個插件，並指定參數。

const htmlwebpackplugin = require('html-webpack-plugin')

　context:path.resolve(__dirname,'../'), //與entry、plugins 同級別加這段是關鍵

plugins:[ new vueloaderplugin(), new htmlwebpackplugin({ filename:'index.html', template:'index.html' }) ]

　　該加的都加上了，再次 npm run build 看下打包成什麼樣子了

　　有了index.html後，這就放心了。。。打開index.html 在瀏覽器中運行下看看，有沒有渲染成咱們想要的樣子。。。

發如今咱們在 app.vue裏面給它寫了一個樣式啊，如今根本就沒有加進來。其實安裝css-loader時也要安裝一下 style-loader ,npm並無給提示。這就很頭疼，只能本身記住要安裝這個包了。如今安裝這個style-loader 這個包

npm i style-loader --save-dev

//安裝完包後，在webpack裏面也要加上配置，module->rules
             {
                    test:/\.css$/,
                    use:[
                         'style-loader',     //style-loader 要在 css-loader 上面。。順序不能亂
                         'css-loader'
                         
                    ]
               },

從新運行打包後，在瀏覽器中運行查看，樣式已經加上去了。。。還有打包圖片、js文件等。在下一篇去實現。如今我把 webpack.config.base.js的配置貼上來。。。

const path = require('path');
const vueloaderplugin = require('vue-loader/lib/plugin')
const htmlwebpackplugin = require('html-webpack-plugin')

const config = {
     context:path.resolve(__dirname,'../'),
     entry:path.resolve(__dirname,'../src/main.js'),
     output:{
          path: path.resolve(__dirname,'../dist'),
          filename:"js/[name]-app-[hash].js",
          publicPath:'./'
     },
     resolve:{
          alias:{
               'vue$':'vue/dist/vue.esm.js',
               '@':path.resolve(__dirname,"../src")
          }
     },
     module:{
          rules:[
               {
                    test:/\.vue$/,
                    loader:'vue-loader'
               },
               {
                    test:/\.css$/,
                    use:[
                         'style-loader',
                         'css-loader'
                         
                    ]
               },
               {
                    test:/\.(png|jpe?g|gif|svg)$/,
                    loader:'url-loader',
                    options:{
                         limit:1024,
                         name:'[name].[ext]-[hash]'
                    }
               }
          ]
     },
     plugins:[
          new vueloaderplugin(),
          new htmlwebpackplugin({
               filename:'index.html',
               template:'index.html'
          })
     ]
}

module.exports = config;

免責聲明

本博客全部文章僅用於學習、研究和交流目的，歡迎非商業性質轉載。
博主在此發文（包括但不限於漢字、拼音、拉丁字母）均爲隨意敲擊鍵盤所出，用於檢驗本人電腦鍵盤錄入、屏幕顯示的機械、光電性能，並不表明本人局部或所有贊成、支持或者反對觀點。如須要詳查請直接與鍵盤生產廠商法人表明聯繫。挖井挑水無水錶，不會網購無快遞。
博主的文章沒有高度、深度和廣度，只是湊字數。因爲博主的水平不高（實際上是個菜B），不足和錯誤之處在所不免，但願你們可以批評指出。
博主是利用讀書、參考、引用、抄襲、複製和粘貼等多種方式打形成本身的文章，請原諒博主成爲一個無恥的文檔搬運工！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。