webpack使用來打包前端代碼

本文轉載自查看原文 2018-11-10 14:42 1492 Vue.js

使用webpack打包js文件(隔行變色案例)

1.webpack安裝的兩種方式

運行npm i webpack -g全局安裝webpack，這樣就能在全局使用webpack的命令
在項目根目錄中運行npm i webpack --save-dev安裝到項目依賴中

2.初步使用webpack打包構建列表隔行變色案例

項目結構:

運行npm init -y 初始化項目，使用npm管理項目中的依賴包
創建項目基本的目錄結構
使用npm i jquery -s安裝jquery類庫
創建main.js並書寫隔行變色的代碼邏輯：

// 導入jquery類庫
import $ from 'jquery'
  
$(function () {
 // 設置奇數行背景色
    $('li:odd').css('background-color','lightblue')
     // 設置偶數行背景色，索引從0開始，0是偶數
    $('li:even').css('background-color',function () {
        return '#'+'F15A24'
    })
})

直接在頁面上引用main.js會報錯，因為瀏覽器不認識import這種高級的JS語法，需要使用webpack進行處理，webpack默認會把這種高級的語法轉換為低級的瀏覽器能識別的語法；
運行webpack 入口文件路徑輸出文件路徑對main.js進行處理：

webpack src/js/main.js -o dist/bundle.js

注意如果提示沒有webpack-cli,安裝:

npm install webpack-cli -g

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    
    <style>
        
        
    </style>
    <!--注意不推薦在這里引入任何包和css文件-->

    <!--由於es6語法瀏覽器不識別 會報錯-->
    <script src="../dist/bundle.js"></script>


</head>
<body>
<ul>
    <li>這是第1個li</li>
    <li>這是第2個li</li>
    <li>這是第3個li</li>
    <li>這是第4個li</li>
    <li>這是第5個li</li>
    <li>這是第6個li</li>
    <li>這是第7個li</li>
    <li>這是第8個li</li>
    <li>這是第9個li</li>
    <li>這是第10個li</li>
</ul>


</body>
</html>

3.使用webpack的配置文件簡化打包時候的命令

項目結構:

在項目根目錄中創建webpack.config.js
由於運行webpack命令的時候，webpack需要指定入口文件和輸出文件的路徑，所以，我們需要在webpack.config.js中配置這兩個路徑：
命令:webpack

    // 導入處理路徑的模塊
    var path = require('path');

    // 導出一個配置對象，將來webpack在啟動的時候，會默認來查找webpack.config.js，並讀取這個文件中導出的配置對象，來進行打包處理
    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // 項目入口文件
        output: { // 配置輸出選項
            path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑
            filename: 'bundle.js' // 配置輸出的文件名
        }
    }

4.實現webpack的實時打包構建

由於每次重新修改代碼之后，都需要手動運行webpack打包的命令，比較麻煩，所以使用webpack-dev-server來實現代碼實時打包編譯，當修改代碼之后，會自動進行打包構建。
運行cnpm i webpack-dev-server --save-dev安裝到開發依賴或者 npm i wepack-dev-server -D
安裝完成之后，在命令行直接運行webpack-dev-server來進行打包，發現報錯，此時需要借助於package.json文件中的指令，來進行運行webpack-dev-server命令，在scripts節點下新增"dev": "webpack-dev-server"指令，發現可以進行實時打包，但是dist目錄下並沒有生成bundle.js文件，這是因為webpack-dev-server將打包好的文件放在了內存中

把bundle.js放在內存中的好處是：由於需要實時打包編譯，所以放在內存中速度會非常快
這個時候訪問webpack-dev-server啟動的http://localhost:8080/網站，發現是一個文件夾的面板，需要點擊到src目錄下，才能打開我們的index首頁，此時引用不到bundle.js文件，需要修改index.html中script的src屬性為:<script src="../bundle.js"></script>
為了能在訪問http://localhost:8080/的時候直接訪問到index首頁，可以使用--contentBase src指令來修改dev指令，指定啟動的根目錄：

 "dev": "webpack-dev-server --contentBase src"

同時修改index頁面中script的src屬性為<script src="bundle.js"></script>

這時的index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    
    <style>
        
        
    </style>
    <!--注意不推薦在這里引入任何包和css文件-->

    <!--由於es6語法瀏覽器不識別 會報錯-->
    <!--<script src="../dist/bundle.js"></script>-->
    <!-- /bundle.js放在了內存中,實際看不到 是在根目錄下-->
    <script src="/bundle.js"></script>


</head>
<body>
<ul>
    <li>這是第1個li</li>
    <li>這是第2個li</li>
    <li>這是第3個li</li>
    <li>這是第4個li</li>
    <li>這是第5個li</li>
    <li>這是第6個li</li>
    <li>這是第7個li</li>
    <li>這是第8個li</li>
    <li>這是第9個li</li>
    <li>這是第10個li</li>
</ul>


</body>
</html>

常用命令:

    "dev": "webpack-dev-server --open --port 3000  --contentBase src --hot"
--open表示自動打開 
--port 3000  端口3000 
--contentBase src根路徑
--hot 熱啟動 不需要手動刷新頁面 自動重載

package.json:

{
  "name": "WEBPACK-STUDY",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000  --contentBase src --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.3.1",
    "webpack": "^4.25.1"
  },
  "devDependencies": {
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  }
}

第二種配置方法:

更改dev:
  "dev": "webpack-dev-server "
修改webpack.config.js,如下:

const path = require('path');
// 啟用熱更新的 第2步
const webpack = require('webpack')
//導入插件

// 這個配置文件，起始就是一個 JS 文件，通過 Node 中的模塊操作，向外暴露了一個 配置對象
module.exports = {
    entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪個文件
    output: { // 輸出文件相關的配置
        path: path.join(__dirname, './dist'), // 指定 打包好的文件，輸出到哪個目錄中去
        filename: 'bundle.js' // 這是指定 輸出的文件的名稱
    },
    //配置dev-server第二種形式
    devServer: {
        open: true,//自動打開瀏覽器
        port:3000,//啟動時候的端口
        contentBase:'src',//指定托管的根目錄
        hot:true //啟用熱更新
    },
    plugins:[
        //第三步
        new webpack.HotModuleReplacementPlugin() //new一個熱更新的模塊
    ]
}

5.使用`html-webpack-plugin`插件配置啟動頁面

由於使用--contentBase指令的過程比較繁瑣，需要指定啟動的目錄，同時還需要修改index.html中script標簽的src屬性，所以推薦大家使用html-webpack-plugin插件配置啟動頁面.

運行cnpm i html-webpack-plugin --save-dev安裝到開發依賴npm i html-webpack-plugin -D
修改webpack.config.js配置文件如下：

    // 導入處理路徑的模塊
    var path = require('path');
   // 導入在內存中生成 HTML 頁面的 插件
// 只要是插件，都一定要 放到 plugins 節點中去
// 這個插件的兩個作用：
//  1. 自動在內存中根據指定頁面生成一個內存的頁面
//  2. 自動，把打包好的 bundle.js 追加到頁面中去
    var htmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // 項目入口文件
        output: { // 配置輸出選項
            path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑
            filename: 'bundle.js' // 配置輸出的文件名
        },
        plugins:[ // 添加plugins節點配置插件
            new htmlWebpackPlugin({
                template:path.resolve(__dirname, 'src/index.html'),//模板路徑
                filename:'index.html'//自動生成的HTML文件的名稱
            })
        ]
    }

修改package.json中script節點中的dev指令如下：

"dev": "webpack-dev-server"

將index.html中script標簽注釋掉，因為html-webpack-plugin插件會自動把bundle.js注入到index.html頁面中！

實現自動打開瀏覽器、熱更新和配置瀏覽器的默認端口號

注意：熱更新在JS中表現的不明顯，可以從一會兒要講到的CSS身上進行介紹說明！

方式1：

修改package.json的script節點如下，其中--open表示自動打開瀏覽器，--port 4321表示打開的端口號為4321，--hot表示啟用瀏覽器熱更新：

"dev": "webpack-dev-server --hot --port 4321 --open"

方式2：

修改webpack.config.js文件，新增devServer節點如下：

devServer:{
        hot:true,
        open:true,
        port:4321
    }

在頭部引入webpack模塊：

var webpack = require('webpack');

在plugins節點下新增：

new webpack.HotModuleReplacementPlugin()

使用webpack打包css文件

運行cnpm i style-loader css-loader --save-dev

main.js引入:

//import ***  from   *** 是es6中導入模塊的方式
import $ from 'jquery'

//webpack只能打包處理js類型文件,無法處理非js類型的文件
//如果要處理非js的文件 需要手動安裝第三方的加載器
//需要安裝style-loader css-loader
import './css/index.css'

$(function () {
    $('li:odd').css('background-color','yellow');
    $('li:even').css('background-color',function () {
        return '#'+'F15A24'
    })
})

修改webpack.config.js這個配置文件：

const path = require('path');
// 啟用熱更新的 第2步
const webpack = require('webpack')
//導入html插件
//只要是插件,都一定要放到plugins節點中去
const htmlWebpackPlugin = require('html-webpack-plugin')
// 這個配置文件，起始就是一個 JS 文件，通過 Node 中的模塊操作，向外暴露了一個 配置對象
module.exports = {
    entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪個文件
    output: { // 輸出文件相關的配置
        path: path.join(__dirname, './dist'), // 指定 打包好的文件，輸出到哪個目錄中去
        filename: 'bundle.js' // 這是指定 輸出的文件的名稱
    },
    //配置dev-server第二種形式
    devServer: {
        open: true,//自動打開瀏覽器
        port:3000,//啟動時候的端口
        contentBase:'src',//指定托管的根目錄
        hot:true //啟用熱更新
    },
    plugins:[
        //第三步
        new webpack.HotModuleReplacementPlugin(), //new一個熱更新的模塊
        new htmlWebpackPlugin({//創建一個在內存中生成html頁面插件

            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'               //指定生成頁面的名稱

        })
    ],
    module:{//這個是第三方的加載器
        rules:[//正則的文件匹配規則
            {test:/\.css$/,use:['style-loader','css-loader']}
        ]
    }

}

module: { // 用來配置第三方loader模塊的
        rules: [ // 文件的匹配規則
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }//處理css文件的規則
        ]
    }

注意：use表示使用哪些模塊來處理test所匹配到的文件；use中相關loader模塊的調用順序是從后向前調用的；

使用webpack打包less文件

運行cnpm i less-loader less -D
修改webpack.config.js這個配置文件：

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

使用webpack打包sass文件

運行cnpm i sass-loader node-sass --save-dev
在webpack.config.js中添加處理sass文件的loader模塊：

{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

使用webpack處理css中的路徑

運行cnpm i url-loader file-loader --save-dev
在webpack.config.js中添加處理url路徑的loader模塊：

{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }

可以通過limit指定進行base64編碼的圖片大小；只有小於指定字節（byte）的圖片才會進行base64編碼：

{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },

使用babel處理高級JS語法

運行cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安裝babel的相關loader包
運行cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev安裝babel轉換的語法
在webpack.config.js中添加相關loader模塊，其中需要注意的是，一定要把node_modules文件夾添加到排除項：

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

在項目根目錄中添加.babelrc文件，並修改這個配置文件如下：

{
    "presets":["es2015", "stage-0"],
    "plugins":["transform-runtime"]
}

注意：語法插件babel-preset-es2015可以更新為babel-preset-env，它包含了所有的ES相關的語法；

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 前端模塊化實踐----使用webpack打包js代碼 ts打包：使用webpack打包ts代碼前端打包利器：webpack工具 Webpack前端打包工具 Docker + webpack 打包前端項目如何使用webpack打包項目 webpack 代碼拆分(按需打包) Electron打包前端代碼使用webpack打包vue工程 app前端代碼打包步驟