+2

Setup webpack 2

Webpack là một module bundler cho những ứng dụng web hiện đại (SPA).

  • Nó là một cấu hình cao và dễ dàng sử dụng
  • Giảm yêu cầu mạng bằng cách kết hợp tất cả vào một file duy nhất.

Giờ bắt đầu đi vào từng bước setup webpack.

Step 1 - Create a folder

Tạo một thư mục gọi là webpack-2-setup

mkdir webpack-2-setup && cd webpack-2-setup
npm init -y

Chú ý: NPM viết tắt của từ Node Packaged Modules, nôm na là quản lý và sử dụng các module được tải về và sử dụng trong dự án của bạn dưới dạng gói thông qua command hoặc các file nén từ github.

Step 2 - Install webpack

Phiên bản webpack mới nhất là 3.10.0 Bạn có thể cài đặt version mới nhất hoặc chỉ rõ phiên bản mà mình muốn cài đặt

npm install --save-dev webpack webpack-dev-server
npm install --save-dev [email protected]<version> [email protected]<version>

Step 3 - Create webpack config

Tạo một file có tên webpack.config.js bên trong thư mục webpack-2-step mà chúng ta vừa tạo

touch webpack.config.js

mở file webpack.config.js và chèn đoạn nội dung sau:

var webpack = require('webpack');

var config = {
  context: __dirname + '/src', // `__dirname` is root of project and `src` is source
  entry: {
    app: './app.jsx',
  },
  output: {
    path: __dirname + '/dist', // `dist` is the destination
    filename: 'bundle.js',
  },
};

module.exports = config;

sau đó các bạn tạo thư mục dự án theo cây thư mục như sau: Trong file app.jsx ta chèn đoạn đoạn code:

alert("Hello world")

Step 4 - Run webpack

webpack

Kết quả sẽ như sau:

Chạy webpack trong chế độ production mode

webpack -p

Ta cũng có thể viết các câu lệnh run scripts trong file package.json rồi sử dụng

npm run <scripts>

Ví dụ trong file package.json:

{
  "name": "webpack-2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "npm": "^5.6.0"
  },
  "devDependencies": {
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "ENV=development webpack --watch",
    "pro": "ENV=production webpack",
    "devserver": "webpack-dev-server",
  },
  "author": "",
  "license": "ISC"
}

thì khi chạy chúng ta dùng:

npm run dev 

Chúng ta cần một local server để chạy ứng dụng. Giờ hãy cài đặt development server

Step 5 - Setup webpack development server

webpack có máy chủ phát triển riêng. Giờ thêm nó vào file webpack.config.js.

var config = {
  devServer: {
    contentBase: __dirname + '/src', // `__dirname` is root of the project
  }
}

tạo file index.html trong thư mục src. thay đổi nội dung của file src/index.html như sau:

<!DOCTYPE html>
<html>
<head>
  <title>Webpack 2 Setup</title>
</head>
<body>

  <!-- bundler script file -->
  <script src="/bundle.js"></script>
</body>
</html>

Step 6 - Run development server

webpack-dev-server
or
npm run devserver

Mặc định khi chạy webpack-dev-server thì sẽ chạy ở công 8080. Ta có thể chỉ định rõ cổng để chạy development server.

var config = {
  devServer: {
    contentBase: __dirname + '/src', // `__dirname` is root of the project,
    port: 9000, //lúc này server sẽ chạy ở công 9000,
    proxy: {
      "/api": {
        target: "http://localhost:3000", //địa chỉ server sẽ cấp api, mặc định sẽ có /api
        pathRewrite: {"^/api" : ""}, // rewrite lại địa chỉ /api ở trên.
      }
    },
  }
}

Giờ mở trình duyệt và gõ địa chỉ: http://localhost:9000. Kết quả ta nhận được: Các bạn có thể tham khảo đầy đủ config webpack-dev-server . Nhưng ES6 hỗ trợ những gì? làm thế nào để cài đặt? Hãy xem.

Loaders

Loader là một task trong webpack, cho phép require() css file trong javascript hoặc convert ảnh thành dữ liệu, urls ....

  1. Cài đặt babel loader và ES6 preset.
npm install --save-dev babel-core babel-loader babel-preset-es2015
  1. ES6 loader Thêm vào file webpack.config.js
module: {
  rules: [
    {
      test: /\.js$/, // Check for all js files
      exclude: /node_modules/,
      use: [{
        loader: 'babel-loader',
        options: { presets: ['es2015'] }
      }]
    }
  ]
}

Còn có 1 cách khác không phải thêm options vào file webpack.config.js thì tạo ra file .babelrc trong thư mục gốc của dự án với nội dung:

{
  presets: [
    "es2015",
    "stage-0",
  ],
}

Giờ thay đổi file app.js

// importing lodash module
import _ from 'lodash';

const array = [1];
const other = _.concat(array, 2, [3], [[4]]);

alert(other); // [1, 2, 3, [4]]

ES6 dùng import thay cho việc require(). chạy lại server:

npm run devserver

Tổng kết

File webpack.config.js đầy đủ.

var config = {
  context: __dirname + '/src', // `__dirname` is root of project and `src` is source
  entry: {
    app: './app.jsx',
  },
  output: {
    path: __dirname + '/dist', // `dist` is the destination
    filename: 'bundle.js',
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },
  devServer: {
    contentBase: __dirname + '/src', // `__dirname` is root of the project
    port: 9000,
    proxy: {
      "/api": {
        target: "http://localhost:3000",
        pathRewrite: {"^/api" : ""}
      }
    },
    https: false,
    noInfo: true,
    historyApiFallback: true,
  },
  plugins: [],
};

module.exports = config;

Trên đây là các bước config cơ bản cho webpack2, để hiểu đầy đủ các config của webpack thì hãy lên trang chủ của webpack. Cảm ơn đã đọc bài viết của mình. Tham khảo: https://webpack.js.org/configuration/ https://gokulkrishh.github.io/webpack/2017/02/03/how-to-setup-webpack-2.html#step-7---development--production-environment https://babeljs.io/


All Rights Reserved

Viblo
Let's register a Viblo Account to get more interesting posts.