webpack入門及使用

時間 2019-11-13

標籤 webpack 入門使用简体版

原文原文鏈接

webpack

模塊打包機:分析你的項目結構，找到其中的javaScript模塊以及一些其餘不能直接被瀏覽器運行的拓展語言（Scss、TypeScipt）並將其轉換和打包爲適合瀏覽器運行的格式。css

安裝

webpack4以後webpack-cli被抽離出來了，須要單獨安裝。若是沒有安裝運行的時候會提示One CLI for webpack must be installed.html

$ npm install -g webpack

$ npm install -g webpack-cli

npm配置文件

建立npm配置文件package.jsonjava

$ npm init -y

安裝webpack依賴包

$ npm install webpack --save-dev

├── app
│   ├── mian.js
│   └── Greeter.js
└── public
    ├── index.html
    └── bundle.js(webpack打包後生成)

建立基礎的index.html

index.html:node

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
     //bundle.js爲webpack打包後生成的文件
    <script src="bundle.js"></script>
  </body>
</html>

咱們再建立一個模塊Greeter(根據CommonJS規範命名一個模塊)

Greeter.js:webpack

module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hello World!";
  return greet;
};

在main.js加載模塊web

main.js:正則表達式

const greeter = require('./Greeter.js');
document.body.appendChild(greeter());

運行webpack

// webpack {{入口文件路徑}} -o {{打包後文件存放路徑}}           
$ webpack app/main.js -o public/bundle.js --mode development

打開index.htmlnpm

經過配置文件使用webpack

webpack除了上述的打包功能還有不少高級的功能，若是僅僅經過命令行的形式，不但不方便並且容易出錯。json

咱們在根目錄建立一個配置文件webpack.config.js

"__dirname"是node.js中的一個全局變量,它指向腳本執行的當前路徑。瀏覽器

webpack.config.js:

module.exports = {
  // 入口文件路徑
  entry:  __dirname + "/app/main.js",
  // 打包後的輸出
  output: {
    // 輸出路徑
    path: __dirname + "/public",
    // 輸出文件名
    filename: "bundle.js"
  }
}

在package.json中添加mode配置

development:開發者模式側重功能調試 production:發佈模式側重模塊體積優化及線上部署

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

運行webpack

搭建本地服務器

安裝組件

$ npm install webpack-dev-server --save-dev

在webpack.config.js添加配置

webpack-dev-server實時編譯後的文件都保存到了內存當中,因此在目錄中看不到編譯後的文件

module.exports = {
  devServer: {
    // 本地服務器加載頁面所在的路徑
    contentBase: __dirname + "/public",
    historyApiFallback: true,
    // 實時刷新
    inline: true
  } 
}

運行服務器

咱們修改Greeter.js之後會自動編譯，而後刷新頁面。

自動刷新 html、css

server只會實時編譯js文件,html、css文件並不自動刷新因此咱們須要安裝相應的插件

html

$ npm install html-webpack-plugin --save-dev

在webpack.config.js文件添加配置

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry:  __dirname + "/app/main.js",
  output:{
    path: __dirname + "/public",
    filename: "bundle.js"
  },
  devServer:{
    contentBase: __dirname + "/public"
  },
  plugins: [new HtmlWebpackPlugin({                 
    template: __dirname + "/public/index.html",
    filename: 'index.html',
    inject: 'body'
  })]
}

css

$ npm install style-loader css-loader --save-dev

在webpack.config.js文件添加配置

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

咱們在public文件夾下建立index.css文件

body{
    color:#0000ff;
}

在main.js導入

import '../public/index.css';

const greeter = require('./Greeter.js');
document.body.appendChild(greeter());

如今咱們修改css及html文件都會獲得動態的刷新

Loaders

Loaders是webpack提供的最激動人心的功能之一了。經過使用不一樣的loader，webpack有能力調用外部的腳本或工具如 scss -> css ES6 -> ES5 JSX -> JS

咱們在上面就用到了style-loader,css-loader來動態刷新css

Loaders配置

test : 匹配loaders處理文件的擴展名的正則表達式
include : 手動添加須要處理的文件
exclude : 須要屏蔽不進行處理的文件
loader : loaders名稱 use的快捷配置方式
use : 所使用的loaders列表

Loaders使用(label)

Loaders的使用大體和上面style-loader css-loader相似,再拿label爲例

Babel是一個JavaScript的編譯平臺，它能夠編譯如今瀏覽器沒有徹底支持的ES6及基於JavaScipt的擴展語言(React的JSX等)
安裝

$ npm install babel-loader babel-core babel-preset-es2015 --save-dev

在webpack.config.js文件添加配置

module: {
        rules: [{
            test: /\.js$/,
            use: {
                loader: "babel-loader"
            },
            exclude: /node_modules/
        }]
    }

Plugins

Plugins是用來拓展Webpack功能的，它們會在整個構建過程當中生效，執行相關的任務。而loaders是在項目打包構建的過程當中用來處理源文件。

Plugins使用

安裝

咱們須要經過npm根據需求來安裝咱們須要的插件

$ npm install plugins-name --save-dev

配置

Plugins必須在webpack.config.js配置，並向plugins屬性中傳入new的實例。

咱們在上面使用html-webpack-plugin ，你會發現咱們使用require方法引入了咱們須要的插件

const HtmlWebpackPlugin = require('html-webpack-plugin')

而後在plugins屬性中new了一個實例

new HtmlWebpackPlugin({                 
    template: __dirname + "/public/index.html",
    filename: 'index.html',
    inject: 'body'
  })

而且傳入了配置參數，而後插件就會在整個構建過程當中生效，執行任務。

other

相關標籤/搜索

每日一句

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