webpack安裝配置使用教程詳解

時間 2019-11-12

標籤 webpack 安裝配置使用教程詳解简体版

原文原文鏈接

webpack安裝配置使用教程詳解

www.111cn.net 編輯:swteen 來源:轉載

本文章來爲各位詳細的介紹一下關於webpack安裝配置使用教程吧，這篇文章對於不喜歡使用 jspm測試的朋友能夠參考一下。

webpack 入門php

目錄css

1 安裝 webpack
2 初始化項目
3 webpack 配置
4 自動刷新
5 第三方庫
6 模塊化
7 打包、構建
8 webpack 模板
我最近大量使用的是 jspm，但由於用它搭建的前端開發環境中，寫測試代碼很是困難，而項目又須要寫測試，因此決定先試試 webpack。html

安裝 webpack
webpack 是一個 npm 包，因此咱們經過 npm 命令來全局安裝：前端

npm install webpack -g
安裝完成後，命令行下就有 webpack 命令可用，執行 webpack --help 能夠查看 webpack 提供的各類命令。node

初始化項目
grunt.js 一類工具能夠藉助 yeoman 來初始化項目，目前我並無看到 webpack 有相似方法，因此當 node.js 項目來初始化。react

npm init 建立一個 package.json 文件
npm install webpack --save-dev 在當前目錄下安裝局域的 webpack
完成以上兩個步驟後，咱們的項目下有一個 package.json 文件，一個 node_modules 文件夾，咱們還須要一個 index.html 文件，內容以下：jquery

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack 教程</title>
</head>
<body>
</body>
</html>
webpack 配置
咱們的代碼將組織在 JavaScript 模塊中，項目會有一個入口（entry）文件，好比 main.js，咱們須要經過 webpack 的配置文件指明它的位置。webpack

在根目錄新建一個 webpack.config.js 文件，添加以下內容：es6

module.exports = {
entry: './main.js'
};
由於咱們在項目部署前須要打包合併 js 文件，因此還須要在 webpack.config.js 中配置一個 output：web

module.exports = {
    entry: './main.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    }
}
output 定義咱們打包出來的文件位置及名稱。

完成以上後，試着在項目根目錄下執行 webpack 命令，咱們的根目錄下會多出一個 bundle.js 文件：

webpack build
自動刷新
到如今爲止，咱們還沒在瀏覽器中打開 index.html 文件，實際上，咱們連 bundle.js 文件都還沒加入 index.html 文件中。如今且先加入：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack 教程</title>
</head>
<body>
<script src="./bundle.js"></script> 
</body>
</html>
這是 webpack 異於其它工具的地方，它在 HTML 文件中直接引用了 build 後的 js 文件，而不是原始的 main.js 文件。這就會有幾個問題：

Q: main.js 或它所引用的模塊的變化如何實時編譯到 bundle.js？

A: 很是簡單，在根目錄下執行 webpack --watch 就能夠監控文件變化並實時編譯了

Q: 上面只是實時編譯了 js 文件，咱們該如何把變化同步到瀏覽器頁面上，實現實時刷新？

A: webpack 提供了 webpack-dev-server 解決實時刷新頁面的問題，同時解決上面一個問題。

安裝 webpack-dev-server

執行 npm install webpack-dev-server -g 在全局環境中安裝 webpack-dev-server
在項目根目錄下執行命令：

$ webpack-dev-server
這樣，咱們就能夠在默認的 http://localhost:8080 網址上打開咱們的項目文件了。

此時，咱們可能會認爲，

js 文件修改
webpack-dev-server 監控到變化
webpack 從新編譯
實時更新瀏覽器中的頁面
但不幸的是，咱們「自覺得是」了。http://localhost:8080 這個網站對 js 文件的變化無動於衷。

咱們能夠啓用 webpack-dev-server 的 hot 模式，在代碼中插入以下一行：

第三方庫
webpack 並非包管理器，因此若是咱們要使用第三方庫，則須要藉助 npm 或其它工具。好比，在項目裏安裝 jQuery：

npm install jquery --save
模塊化
webpack 自稱 module bundler，在它的定義中，CSS、圖片、文件等等，均可以經過相應的 loader 加載，變成 JavaScript模塊，如下具體展開說明。

模塊化 JavaScript

若是我想使用 ES6 的方式引入某個 es6 模塊，好比：

import $ from 'whatever';
怎麼辦？瀏覽器並不提供原生支持，webpack 經過各類 loader 來解決這類問題。好比這 ES6 的語法，能夠藉助 babel-loader：

安裝 babel-loader

npm install --save-dev babel-loader
配置 webpack.config.js

在 module.exports 值中添加 module：

module.exports = {
entry: {
    app: ['webpack/hot/dev-server', './main.js']
},
output: {
    filename: 'bundle.js'
},
module: {
    loaders: [
        { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
    ]
}
}

這樣咱們就能夠在咱們的 js 文件中使用 ES6 語法，babel-loader 會負責編譯。

上面的方法，是在 webpack.config.js 文件中定義某一類型文件的加載器，咱們也能夠在代碼中直接指定：

import $ from 'babel!whatever'
由於 babel-loader 容許咱們使用 ES6 語法，因而咱們的模塊徹底能夠用 ES6 的 module 來組織代碼： export 一個簡單的模塊：

// script/log.js 文件
export default (param) => {
console.log('你好啊', param);
}
而後在 main.js 中導入使用：

// main.js 文件
import log from "./script/log.js";
CSS 加載器

咱們能夠按傳統方法使用 CSS，即在 HTML 文件中添加：

所以咱們再也不使用 link 標籤來引用 CSS，而是經過 webpack 的 style-loader 及 css-loader。前者將 css 文件以 <style></style> 標籤插入 <head> 頭部，後者負責解讀、加載 CSS 文件。

安裝 CSS 相關的加載器

npm install style-loader css-loader --save-dev
配置 webpack.config.js 文件

{
// ...
module: {
    loaders: [
        { test: /\.css$/, loaders: ['style', 'css'] }
    ]
}
}
在 main.js 文件中引入 css

import'./style/app.css';
重啓 webpack-dev-server

模塊化 CSS

上一步裏，咱們 import 到 JavaScript 文件中的 CSS 文件中的 CSS 類打包時是 export 到全局環境的，也就是說，咱們只是換了種加載 CSS 的方式，在書寫 CSS 的時候，仍是須要注意使用命名規範，好比 BEM，不然全局環境 CSS 類的衝突等問題不會消失。

這裏，webpack 作了一個模塊化 CSS 的嘗試，真正意思上的「模塊化」，即 CSS 類不會泄露到全局環境中，而只會定義在 UI 模塊內 – 好比 react.js 這類模塊，或者 web components。相似的嘗試還有 ember-component-css 與 jspm 的 plugin css。

autoprefixer

咱們在書寫 CSS 時，按規範寫，構建時利用 autoprefixer 能夠輸出 -webkit、-moz 這樣的瀏覽器前綴，webpack 一樣是經過 loader 提供該功能。

安裝 autoprefixer-loader

npm install autoprefixer-loader --save-dev
配置 webpack.config.js

loaders: [{
loader: 'style!css!autoprefixer?{browsers:["last 2 version", "> 1%"]}',
//...
}]
重啓 webpack-dev-server

假如咱們在 CSS 中寫了 body { display: flex; } 規則，再查看 bundle.js 文件的話，咱們能看到相似以下的代碼：

body {\n\tdisplay: -webkit-box;\n\tdisplay: -webkit-flex;\n\tdisplay: -ms-flexbox;\n\tdisplay: flex;\n}
圖片

圖片一樣但是是模塊，但使用的是 file loader 或者 url loader，後者會根據定義的大小範圍來判斷是否使用 data url。

import loadingIMG from 'file!../img/loading.gif'

React.render(<img src={loadingIMG} />, document.getElementById('app'));
打包、構建
項目結束後，代碼要壓縮、混淆、合併等，只須要在命令行執行：

webpack
便可，webpack 根據 webpack.config.js 文件中的配置路徑、構建文件名生成相應的文件。

webpack 模板上面說的是一步一步使用 webpack 搭建開發環境，固然，實際應用中，大能夠借用一些模板，好比 react hot boilerplate 這樣的庫。

相關標籤/搜索

每日一句

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