Webpack安裝及打包js、css文件示例

時間 2021-08-14

標籤 javascript css html 前端 java webpack web npm markdown less 欄目 JavaScript 简体版

原文原文鏈接

什麼是Webpack

Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關係進行靜態分析，而後將這些模塊按照指定的規則生成對應的靜態資源。Webpack 能夠將多種靜態資源 js、css、less 轉換成一個靜態文件，減小了頁面的請求。javascript

Webpack安裝

全局安裝

npm install webpack -g
npm install webpack‐cli -g

安裝後查看版本號

webpack -v

快速入門

js打包

（1）建立src文件夾，建立bar.jscss

exports.info=function(str){
    document.write(str);
}

（2）src下建立logic.jshtml

exports.add=function(a,b){
    return a+b;
}

（3）src下建立main.js前端

var bar = require('./bar');
var logic = require('./logic');
bar.info('hello world!' + logic.add(100, 300));

（4）建立配置文件webpack.config.js ，該文件與src處於同級目錄java

var path = require('path');
module.exports = {
    entry: './src/main.js',
    output: {
        path:path.resolve(__dirname,'./dist'),
        filename:'bundle.js'
    }
}

以上代碼的意思是：讀取當前目錄下src文件夾中的main.js（入口文件）內容，把對應的js文件打包，打包後的文件放入當前目錄的dist文件夾下，打包後的js文件名爲bundle.js。
（5）執行編譯命令webpack

webpack

（6）執行後查看bundle.js 會發現裏面包含了上面兩個js文件的內容。
（7）建立index.html ,引用bundle.jsweb

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <script src="./dist/bundle.js"></script>
</body>
</html>

測試調用index.html，會發現有內容輸出。npm

css打包

（1）安裝style-loader和 css-loader
Webpack 自己只能處理 JavaScript 模塊，若是要處理其餘類型的文件，就須要使用loader 進行轉換。
Loader 能夠理解爲是模塊和資源的轉換器，它自己是一個函數，接受源文件做爲參數，返回轉換的結果。這樣，咱們就能夠經過 require 來加載任何類型的模塊或文件，好比CoffeeScript、 JSX、 LESS 或圖片。首先咱們須要安裝相關Loader插件，css-loader 是將 css 裝載到 javascript；style-loader 是讓 javascript 認識css。markdown

npm install style-loader css-loader --save-dev
#使用cnpm會報錯
cnpm install style-loader css-loader --save-dev

（2）修改webpack.config.jsless

var path = require('path');
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

（3）在src文件夾建立css文件夾,css文件夾下建立css1.css

body{
    background: red;
}

（4）修改main.js ，引入css1.css

require('./css/css1.css')//新增內容
var bar = require('./bar');
var logic = require('./logic');
bar.info('hello world!' + logic.add(100, 300));

（5）從新運行webpack。（6）運行index.html看看背景是否是變成紅色啦？

相關標籤/搜索

每日一句

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