webpack 學習

時間 2019-11-08

標籤 webpack 學習简体版

原文原文鏈接

一、webpack介紹:

webpack是一個現代的JavaScript應用模塊打包器（module bundler），它能把各類資源，例如JS（含JSX）、coffee、樣式（less/sass）、圖片等都做爲模塊來處理和使用。它有着難以置信的配置和神奇的效果，大大提升了咱們程序員的工做效率。舉個例子：咱們能夠直接使用require（xxx）的形式來引入各模塊，即便他們可能須要通過編譯（好比JSX和sass），但咱們無須再上面花費太多心思，webpack有着各類健全的加載器（loader）在默默處理這些事情。它能夠部分代替Grunt和gulp的功能。javascript

二、webpack的安裝

npm install webpack -g

咱們還能夠直接安裝到項目的依賴裏，也就是寫入package.jsoncss

npm init

npm install webpack --save-dev

三、配置文件webpack.config.js

重點:什麼是入口文件？模塊打包的起點稱之爲入口起點（entry point）。入口起點告訴webpack從哪裏開始，並遵循着依賴關係進行打包。能夠將您的應用入口起點認爲是根上下文（contextual root）或app第一個啓動文件。html

webpack.config.js 示例java

1 module.exports = {
2 
3     entry: "./main.js",
4     output: {
5         filename: 'bundle.js'
6     }
7 };

安裝live-server,只要用npm install就能夠安裝了

npm install live-server -g

瀏覽器 127.0.0.1:8080

live-server服務器介紹

live-server是一款簡單的開發用的Http服務器。特色就是在你靜態文件進行修改後，有自動加載的功能。node

使用它主要有兩個緣由：webpack

一、對Ajax的操做必需要有服務器的支持，好比用javascript去獲取內容。程序員

二、瀏覽器的自動更新，能夠加快開發。你不須要安裝任何瀏覽器插件或手動添加代碼片斷到您的網頁代碼裏web

多入口文件（Multiple entry files）

創建兩個JavaScript文件，分別是main1.js 和main2.jsnpm

index.html文件，引入bundle1.js和bundle2.js，這兩個文件就是咱們要打包的兩個js文件json

創建webpack.config.js配置文件

module.exports = {

    entry: {
        bundle1: './main1.js',
        bundle2: './main2.js'
    },
    output: {
        filename: '[name].js'
    }
};

使用Webpack CSS loader加載器

1、什麼是loader

loader用於轉換應用程序的資源文件，他們是運行在nodejs下的函數，使用參數來獲取一個資源的來源而且返回一個新的來源（資源的位置），例如：你可使用loader來告訴webpack去加載一個coffeeScript或者Babel文件。

2、loader的解析

loader的解析相似模塊，一個loader模塊會導出一個方法而且可被nodejs寫爲可兼容的JavaScript,一般狀況下經過npm來管理loader,但你也能夠把loader放在本身的應用裏。

3、安裝loader

npm install xxx-loader --save-dev

npm install xxx-loader --save

4、CSS-loader 實例

一、創建main.js文件，並用require引入app.css文件

require('./app.css');
document.write('<h1>Hello Webpack!</h1>');

2 app.css

三、創建webpack.config.js配置文件，在裏邊加入加載器

module.exports = {

    entry: './main.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
        ]
    }
};

5 用npm 安裝 css-loader 和style-loader

npm install style-loader --save-dev

npm install css-loader --save-dev

六、在控制檯輸入 webpack 進行打包

webpack

使用webpack Image loader 加載圖片

一、新建main.js文件，建立img標籤後，把src的值用require引進來。而後插入標籤

1 var img1 = document.createElement("img");
2 
3 img1.src = require("./small.png");
4 document.body.appendChild(img1);
5  
6 var img2 = document.createElement("img");
7 img2.src = require("./big.png");
8 document.body.appendChild(img2);

二、創建index.html文件，引入bundle.js

 1 <!DOCTYPE html>
 2 <html lang="en">
 3  
 4 <head>
 5     <title></title>
 6     <meta charset="UTF-8">
 7     <meta name="viewport" content="width=device-width, initial-scale=1">
 8  
 9 </head>
10  
11 <body>
12     <script type="text/javascript" src="bundle.js"></script>
13 </body>
14  
15 </html>

三、創建webpack.config.js配置文件

 1 module.exports = {
 2     entry: './main.js',
 3     output: {
 4         filename: 'bundle.js'
 5     },
 6     module: {
 7         loaders: [
 8             { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' },
 9         ]
10     }
11 };

四、打開命令行，用npm 安裝url-loader包。

首先npm init

獲得 webpack.json

在

npm install file-loader --save-dev
 
npm install url-loader --save-dev

五、用webpack命令進行打包

webpack

使用uglify-js 壓縮打包JS代碼

1、webpack 插件機制介紹：

插件能夠完成更多loader不能完成的功能。插件的使用通常是在webpack的配置信息 plugins選定中指定。Webpack自己內置了一些經常使用的插件，還能夠經過npm安裝第三方插件。

2、uglify-js介紹：

ugligy-js是一個用npm安裝的JavaScript代碼壓工具，咱們在grunt和gulp中常用。

用npm命令進行安裝

npm install uglify-js g

最經常使用的方法

uglifyjs [input files] [options]

3、用Webpack中的uglify-js壓縮Demo

 1 var webpack = require('webpack');
 2 
 3 module.exports = {
 4     entry: './main.js',
 5     output: {
 6         path: __dirname,
 7         filename: 'bundle.js'
 8     },
 9     plugins: [
10         new webpack.optimize.UglifyJsPlugin({
11             compress: {
12                 warnings: false
13             }
14         })
15     ]
16 };

使用webpack構建本地服務器

利用webpack自帶的webpack-dev-server來構建一個本地服務器。它讓你的瀏覽器檢測你的代碼修改，並自動刷新修改後的結果，它是基於node.js構建。webpack-dev-server是一個單獨的組件，在webpack中進行配置以前須要單獨安裝它做爲項目依賴。

一、安裝webpack-dev-server 全局

npm install -g webpack-dev-server

二、在webpack.config.js中配置devserver選項：

contentBase : 默認webpack-dev-server會爲根文件夾提供本地服務器，若是想爲另一個目錄下的文件提供本地服務器，應該在這裏設置其所在目錄。
port ：設置默認監聽端口，若是省略，默認爲」8080″
inline : 設置爲true，當源文件改變時會自動刷新頁面
colors ：設置爲true，使終端輸出的文件爲彩色的
historyApiFallback ：在開發單頁時很是有用，它依賴於HTML5 history API，若是設置爲true，全部的跳轉將指向index.html
host ：主機地址，若是是開發本機搭建，須要使用本機IP地址，不然會報錯

 1 module.exports = {
 2     entry: __dirname + '/main.js',
 3     output: {
 4         path: __dirname + '/',
 5         filename: 'bundle.js'
 6     },
 7     devServer: {
 8         contentBase: './', //本地服務器所加載的頁面所在的目錄
 9         host: '192.168.1.158', //本地IP地址
10         colors: true, //終端輸出結果爲彩色
11         historyApiFallback: true, //不跳轉
12         inline: true, //實時刷新
13         port: '3333' //端口號
14  
15     }
16 }

三、在終端中輸入命令，開啓運行本地服務器。它不只提供了服務器，還會監視咱們的文件變化自動更新效果，可是它不是真正的打包，它相似於在內存中進行了打包。因此本地文件並無變化

webpack-dev-server

相關標籤/搜索

每日一句

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