Vue.js 第5章 webpack配置

爲何咱們須要打包構建工具：由於咱們之後作項目的時候，會使用到不少種不一樣的工具或者語言，這些工具或者語言其實瀏覽器並不支持

webpack 是一個現代 JavaScript 應用程序的模塊打包器(module bundler)，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Sass，TypeScript等），並將其轉換和打包爲合適的格式供瀏覽器使用。

 

webpack打包構建工具玩法

過程：

1.先初始化包管理文件：npm init -y

2.下載安裝webpack    npm i webpack webpack-cli -g

3.輸入 webpack  源js文件；他會自動建立dist文件夾，將源js文件編譯轉換成瀏覽器能夠支持的main.js文件

4.在你的html頁面中引入轉換以後的main.js文件

 

使用webpack.config.js實現webpack的配置

webpack.config.js有什麼用?

它能夠對webpack打包構建的行爲進行約束或設置，意味着經過配置咱們也可讓webpack擁有處理某種文件的能力

 

添加一個webpack.config文件，注意文件名稱絕對不能修改

 

如何進行入口和輸出的配置？

var path = require('path')
// 返回一個對象，這個對象中就包含當前前用戶自定義的配置
module.exports = {
    // 入口：指定你想打包轉換哪個文件？源文件
    entry:'./src/app.js',
    // 輸出
    output:{
        // path:打包構建目標文件的目錄
        path:path.join(__dirname,"dist"),
        // filename:打包構建目標文件的文件名
        filename:'main.js'
    }
}

如何和輸出的配置

輸入Webpack就能夠將指定的文件打包構建爲指定目錄下指定名稱的文件

出現有關mode的警告能夠在命令的後面添加 --mode=development

在html文件中引入打包後的文件

 

使用webpack-dev-server

以前的代碼配置還有一個問題很噁心：打包構建以後，若是用戶修改的源代碼，頁面中並不會即時更新效果，咱們須要從新打包構建，才能看到修改後的效果---不合理也麻煩

咱們指望有一個工具可以讓咱們從反覆打包構建中解脫出來。

 

webpack-dev-server是什麼：就是webpack自動開啓的一個內存服務器，它是webpack自動建立一個內存服務器，它會將打包構建好的資源文件放到這個服務器上進行託管，也就意味着這個資源文件已經不會再在本地存儲了。

它能什麼用：它是一個託管機制，它能夠作到當用戶修改源代碼的時候，會自動的更新服務器資源，意味着咱們修改源代碼以後不用再手動webpack從新打包構建了。

 

如何使用

下載安裝：npm i webpack-dev-server -g

添加配置

// 添加webpack-dev-server的配置
// 建議使用這個配置，新版本建議這樣配置,默認會生成main.js
devServer: {
    //  設置託管文件的存儲路徑，這個路徑中的資源後期能夠被用戶訪問
    publicPath: '/dist'
}

運行命令：webpack-dev-server

開啓服務器時自動打開瀏覽器：webpack-dev-server --open

 

webpack解析css

之後咱們可能會什麼樣的方式來引入css文件

若是以import的方式引入css樣式文件後的錯誤信息

 如何添加webpack配置，讓webpack幫助咱們解析css

npm install css-loader style-loader --save-dev

css-loader:用於解析css文件

style-loader:用於將解析好的Css代碼添加到頁面中

添加配置

// 下面這個成員就是不一樣類型的文件的解析加載規則
module: {
    // 配置規則，裏面能夠添加多個規則的配置
    rules: [
        // 配置的是用來解析.css文件的loader(style-loader和css-loader)
        {
            // 1.0 用正則匹配當前訪問的文件的後綴名是  .css
            test: /\.css$/,
            use: ['style-loader', 'css-loader'] //webpack底層調用這些包的順序是從右到左
        }
    ]
}

添加支持CSS的配置

 

webpack解析less和scss

 之後咱們寫樣式 不必定就使用css,畢竟預處理器更強大也更方便，建立less文件，同時在app.js中作引入，發現錯誤如期而至，缺乏對應的less處理loader。

配置過程：

下載：npm install less less-loader --save-dev

添加配置

// 配置less解析
{
    test: /\.less$/,
        use: [{
            loader: 'style-loader'
        }, {
            loader: 'css-loader'
        }, {
            loader: 'less-loader'
        }]
}

添加支持less的配置

 

webpack-圖標+圖片

使用圖片有問題並非說在頁面中引入圖片資源有問題，而是將圖片當成某個類型中的引入的資源來使用，如在樣式中使用圖片資源，這個時候就會出現相似的錯誤。

配置過程：

下載：npm install file-loader url-loader --save-dev

添加配置

{
    test: /\.(png|jpg|gif|eot|svg|ttf|woff)/,
    use: [{
        loader: 'url-loader',
        options: {
          // limit表示若是圖片大於50000byte，就以路徑形式展現，小於的話就用base64格式展現
            limit: 50000
        }
    }]
}

添加支持圖標，圖片的支持

 

webpack-babel

一些老版的瀏覽器可能不支持ES6，這個babel的做用就是可以將ES6轉換ES5，達到兼容的目的。

如今新版webpack，新版node都已經可以支持ES6,意味着對於咱們現的版本而言，你配置或者不配置都沒有關係。

配置過程

下載:npm install babel-loader @babel/core @babel/preset-env --save-dev

添加配置

{
      test: /\.js$/,
      // Webpack2建議儘可能避免exclude，更傾向於使用include
      // exclude: /(node_modules)/, // node_modules下面的.js文件會被排除
      include: [path.resolve(__dirname, 'src')],
      use: {
        loader: 'babel-loader',
        // options裏面的東西能夠放到.babelrc文件中去
        options: {
            presets: ['@babel/preset-env']
          }
      }
    }

添加支持ES6的配置

 

 

思惟腦圖總結