Webpack --- 模塊打包器

時間 2020-07-18

標籤 webpack 模塊打包简体版

原文原文鏈接

Webpack是一款模塊加載器兼打包工具，它能把各類資源，例如JS（含JSX javascript xml）、coffee、樣式（含less/sass/css）、圖片等都做爲模塊來使用和處理。咱們能夠直接使用 require(XXX) 的形式來引入各模塊，即便它們可能須要通過編譯（好比JSX和sass），但咱們無須在上面花費太多心思，由於 webpack 有着各類健全的加載器（loader）在默默處理這些事情。javascript

1. 安裝 css

cnpm i webpack -g 全局安裝html

cnpm i webpack -D 局部安裝java

如下爲webpack@3.8.1node

在項目文件夾下執行npm init，進行初始化，獲得package.json文件webpack

安裝過程當中-D表示開發依賴 devDependencies，-S表示生產依賴或項目依賴 dependencieses6

2. webpack初步 web

新建entry.js文件，這個文件爲入口文件，在這個文件中能夠引入require()多個模塊文件。npm

命令執行 webpack entry.js bundle.js 進行打包，打包後全部模塊文件將在bundle.js文件中顯示json

html文件能夠直接script引入bundle.js

3. 引入樣式文件

在入口文件中不能直接引入css文件，由於不是一個模塊，一個js文件爲一個模塊。若是加載css文件須要藉助加載器loader

安裝 npm i style-loader css-loader -D

文件引入 require("style-loader!css-loader!./index.css")

style-loader 表明把css樣式代碼轉爲js字符串的node樣式代碼

css-loader 轉譯css爲commonJS模塊方便導入

./index.css 爲css文件名

若是說要引入sass文件或者less文件，也須要下載對應的loader

安裝 cnpm i sass-loader node-sass less-loader less -D

此處版本爲sass-loader@7

文件引入require("style-loader!css-loader!sass-loader!./main.scss")

4. 關於webpack.config.js配置文件

 1 module.exports = {
 2     entry:'./entry.js', //入口文件
 3     output:{ //打包的出口文件
 4         path:__dirname,//根路徑
 5         filename:"bundle.js",//打包文件
 6     },
 7     module:{  //須要打包的模塊（js css less sass png ...）
 8         loaders:[    
 9             {
10                 test:/\.css$/,  //css文件名
11                 use:["style-loader","css-loader"]
12             },
13             {
14                 test:/\.less$/,
15                 use:["style-loader","css-loader","less-loader"]
16             },
17             {
18                 test:/\.scss$/,
19                 use:["style-loader","css-loader","sass-loader"]
20             },
21         ]
22     }
23 }