1.什么是webpack

webpack是一個前端資源加載/打包工具。它根據(jù)模塊的依賴關系進行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應的靜態(tài)資源。

從上圖看出，webpack可以將多種靜態(tài)資源js，css，less轉(zhuǎn)換成一個靜態(tài)文件，減少頁面的請求。

2.webpack安裝

全局安裝：

npm install webpack -g

npm install webpack-cli -g

查看版本號：

webpack -v

3.快速入門

3.1 js打包

1.創(chuàng)建src文件，src里創(chuàng)建bar.js

//bar

exports.info = function(str){

document.write(str);

}

2.src里創(chuàng)建logic.js

//logic

exports.add = function(a,b){

return a+b;

}

3.src里創(chuàng)建main.js

//main.js

var bar = require("./bar");

var logic = require("./logic");

require('./css1.css');

bar.info("hello world! "+logic.add(100,200));

4.創(chuàng)建配置文件webpack.config.js，與src處于同級目錄

const path = require('path');

module.exports = {

// 讀取src文件夾中的main.js(入口文件)

entry: './src/main.js',

output: {

// path.resolve解析當前相對路徑的絕對路徑 path.join

path: path.resolve(__dirname, 'dist'),

filename: 'bundle.js',

},

};

含義：讀取當前目錄下src文件夾中的main.js(入口文件)內(nèi)容，把對應的js文件打包，打包后的文件放入當前目錄的dist文件夾下，打包后的js文件名為bundle.js。

5.執(zhí)行編譯命令

webpack

編譯后查看dist文件夾下的bundle.js文件，會發(fā)現(xiàn)該文件包含了上面兩個js文件的內(nèi)容

6.創(chuàng)建index.html頁面，引用bundle.js

打開index.html頁面，查看頁面效果

3.2 css打包

1.安裝style-loader和css-loader

webpack本身只能處理JavaScript模塊，若要處理其他類型的文件，需要使用loader進行轉(zhuǎn)換。

Loader 可以理解為是模塊和資源的轉(zhuǎn)換器，它本身是一個函數(shù)，接受源文件作為參數(shù)，返回轉(zhuǎn)換的結果。這樣，我們就可以通過?require?來加載任何類型的模塊或文件，比如CoffeeScript、 JSX、 LESS 或圖片。首先我們需要安裝相關Loader插件，css-loader 是將 css 裝載到 javascript；style-loader 是讓 javascript 認識css

cnpm?install?style‐loader?css‐loader?‐‐save‐dev

2.修改webpack.config.js，添加module

const path = require('path');

module.exports = {

entry: './src/main.js',

output: {

// path.resolve解析當前相對路徑的絕對路徑 path.join

path: path.resolve(__dirname, 'dist'),

filename: 'bundle.js',

},

module: {

rules: [

// webpack讀取loader時,是從右到左

// loader執(zhí)行順序是從右到左以管道方式鏈式調(diào)用

// css-loader是將css裝載到javascript,style-loader是讓javascript認識css

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

]

}

};

3.src里創(chuàng)建css文件夾，css下創(chuàng)建css1.css

body{

background: red;

}

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

require('./css1.css');

5.重新運行webpack

6.運行index.html，查看頁面背景色

總結

以上是生活随笔為你收集整理的webpack 读取文件夹下的文件_webpack基本介绍及使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。