webpack搭建vue項目實現腳手架功能

在今天學習webpack搭建前端環境時候咱們應該先熟知node有關的知識，用node.js來安裝一個包。便於咱們更好的理解。

一：什麼是webpack

1.本質上，Webpack 是一個現代 JavaScript >應用程序的靜態模塊打包器（static module >bundler）。在 Webpack 處理應用程序時，它會在內部建立一個依賴圖（dependency >graph），用於映射到項目須要的每一個模塊，而後將全部這些依賴生成到一個或多個 bundle。

2.webpack是一個靜態資源構建，打包的工具
複製代碼

二：webpack能解決什麼問題？

Webpack 能夠作到按需加載。像 Grunt、Gulp 這類構建工具，打包的思路是：遍歷源文件→匹配規則→打包，這個過程當中作不到按需加載，即對於打包起來的資源，到底頁面用不用，打包過程當中是不關心的。

Webpack 跟其餘構建工具本質上不一樣之處在於：Webpack 是從入口文件開始，通過模塊依賴加載、分析和打包三個流程完成項目的構建。在加載、分析和打包的三個過程當中，能夠針對性的作一些解決方案，達到按需加載的目的，好比code split（拆分公共代碼等）。

固然，Webpack 還能夠輕鬆的解決傳統構建工具解決的問題：

1.模塊化打包，一切皆模塊，JS 是模塊，CSS 等也是模塊；

2.語法糖轉換：好比 ES6 轉 ES五、TypeScript；

3.預處理器編譯：好比 Less、Sass 等；

4.項目優化：好比壓縮、CDN；

5.解決方案封裝：經過強大的 Loader 和插件機制，能夠完成解決方案的封裝，好比 PWA；

6.流程對接：好比測試流程、語法檢測等。

三:爲何要使用webpack?

1.解耦須要： 使用SPA（Single-page Application，單頁面應用）開發大型項目時，解決模塊之間的解耦和維護問題；

2.前端工程化須要：

前端開發逐漸向工程化演進，理解前端框架的項目構建的流程（如React、Vue、Angular）；

3.項目擴展須要：

理解Webpack核心概念（如Babel加載器、Plugin插件），便於項目協同開發與項目整合；

4.面試須要：

進入一線互聯網公司的必備技能；

四：webpack搭建前端開發環境

首先要有node環境，進入Node.js的官網，選擇對應系統下載安裝包。安裝node後集成了npm管理器

4.1安裝模塊

1.咱們建立一個項目文件夾並進入。例如：webpack_vue

2.咱們打開終端，輸入： npm init -y

3.來建立一個package.json

4.安裝webpack工具

npm install webpack webpack-cli --save-dev 或者
 npm i webpack webpack-cli -D
複製代碼

5.在根目錄下建立一個src，而且創建一個index.js.

6..咱們要在package.json的script裏面 加一個 「build」：「webpack」 咱們直接npm run build 來運行 這個時候奇蹟的事情就發生了，自動構建了一個dist的目錄，而且生成了一個main.js 的文件

4.2配置文件

咱們在手動配置文件的時候須要建立一個webpack.config.js。在這裏面配置文件而且拋出模塊 入口（entry），出口（output），plugin（配置插件）,加載器（loader）

（1）配置入口（entry）

module.exports = {
  mode: "development", //設置咱們的環境 是線上仍是線下 這裏咱們設置的是線下的 線上的爲production
  entry: "./src/index.js",//入口文件
複製代碼

（2）配置出口（output）

const path = require('path');//咱們也須要引入path模塊 ，由於引入路徑的時候要用到。

//配置出口
module.exports = {
 output: {
   path: path.resolve(__dirname, 'dist'),//出口的文件夾
    filename: "bundle.js"//文件夾的名字
  },
複製代碼

注意咱們在運行時候可能會出現一個黃色的警告，那麼咱們如何消除這個警告呢。

第一步： npm install --save-dev clean-webpack-plugin

第二步： 在webpack.config.js中引入

第三步：經過plugins實例化

module.exports = {
        		plugins: [
        		new CleanWebpackPlugin(),
           };
複製代碼

(3)配置加載器 （loader）

//webpack經過loader識別文件的匹配規則
    module: {
        
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.(sass|scss)$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            { test: /\.(jpg|jpeg|png|gif)$/, use: ['url-loader'] },
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
            { test: /\.vue$/, loader: 'vue-loader' }
        ]

    },
複製代碼

（4） plugin 引入插件

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
   plugins: [
        //添加文件清理的插件
        //實例化
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './index.html',  //讀取模板的入口文件
            filename: 'index.html'  //生成打包後的html文件
        }),
        new VueLoaderPlugin()
    ],
複製代碼

4.3 搭建本地服務

1.安裝依賴：

npm install webpack-dev-server -D
複製代碼

//啓服務器環境
devServer: {
    //配置端口號
    port: 9999,
    //能夠實現熱更新
    hot: true, 
    //服務器在內存中監聽目錄
    contentBase: path.join(__dirname, 'dist'),
}
複製代碼

五：集成vue

5.1

1.安裝es6的包：babel

1.npm install --save-dev babel-loader @babel/core @babel/preset-env
複製代碼

2.配置webpack

{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
複製代碼

3.在項目根目錄下建立.babelrc配置文件

{
           "presets": ["@babel/preset-env"]
     }

複製代碼

5.2安裝vue包

安裝

vue-loader,vue-template-compliler

複製代碼

配置vue插件並在plugin中實例化插件：

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

   plugins: [
    ...
    //實例化vue插件
    new VueLoaderPlugin()
],

複製代碼

拓展

固然呢，咱們也能夠用sass啊less進行編譯，那麼咱們一樣要作的就是咱們安裝包，而後再webpack.config.js裏面引入，而後咱們在plugin裏面引入 ，實例化
複製代碼

webpack識別less:

npm install less less-loader -D

**webpack識別sass:**

```bash

   npm install sass-loader node-sass -D
複製代碼

webpack識別圖片或其餘文件

npm install url-loader -D
複製代碼

那麼接下來咱們就能夠下載vuex vue-router啊等，盡情的暢遊在vue的世界裏面了