GALAXY TECH
Chuyên gia Công nghệ
Thứ hai, 09/10/2017 | 00:00 GMT+7

Xác minh cấu hình Webpack của Vue

Dù muốn hay không, webpack là một phần chính của bộ công cụ JavaScript front-end hiện đại, biến vô số file nhỏ thành một (hoặc nhiều) gói cố định. Tuy nhiên, đối với nhiều người, nó hoạt động là một bí ẩn. Sự gia tăng của các công cụ CLI tạo ra các cấu hình làm sẵn phức tạp đã giúp xoa dịu và làm trầm trọng thêm vấn đề này. Nhưng khi tất cả đã được nói và làm xong, bạn có thực sự hiểu vô số file cấu hình đang làm gì không? Bạn có thể tự tay xây dựng cấu hình của riêng mình không? Hi vọng rằng sau bài viết này, bạn sẽ như vậy.

Bắt đầu tắt

Hãy tạo một dự án nhanh chóng với mẫu webpack-simple của vue-cli .

Mẫu webpack-simple về cơ bản của cài đặt webpack mà bạn có thể sử dụng cho Vue. Như tên của nó, nó khá đơn giản, nhưng nó hoàn thành công việc một cách đáng kể. Tôi phải thừa nhận rằng tôi đã sử dụng nó trong production một lần mặc dù bạn không được phép…

# Install vue-cli globally if you haven't already.
$ npm install -g vue-cli

# Create a new project called "demistify-project" with the "webpack-simple" template.
$ vue init webpack-simple demistify-project

# Install the dependencies for the project
$ cd demistify-project
$ npm install

Được rồi, bây giờ, nếu bạn muốn, hãy kích hoạt bản dựng phát triển với npm run dev và chơi với mã, reload nóng và những thứ khác. Đừng lo, tôi sẽ đợi.

✨Mystical Config✨

Bạn đã hoàn thành? Được rồi, hãy tiếp tục và xem qua webpack.config.js , file thực hiện hầu hết các công việc nặng nhọc. Tôi sẽ dán file tôi có ở đây để có biện pháp tốt. (Được tạo bằng version 1.0.0 của mẫu webpack-simple .)

webpack.config.js
var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

Được rồi, vì vậy có khá nhiều thứ để tham gia vào đó. Và thành thật mà nói, bạn sẽ làm tốt nếu để phần lớn nó một mình. Mặc dù vậy, tôi sẽ cố gắng giải thích nó với khả năng tốt nhất của bạn , vì vậy nếu bạn thực sự cảm thấy muốn lộn xộn với một cái gì đó, ít nhất bạn sẽ có một ý tưởng mơ hồ về những gì bạn đang làm.

Dù sao đi nữa, webpack.config.js chỉ là một file xuất một đối tượng được thông dịch bởi webpack để xây dựng dự án của bạn. Điều đó nghĩa là bạn có thể sử dụng bất kỳ module nút nào trong đó và soạn nó từ nhiều file và vị trí tùy thích. Điều đó làm cho Webpack trở nên cực kỳ linh hoạt và mạnh mẽ, nhưng nó cũng nghĩa là hầu như không ai sử dụng các quy ước giống hệt nhau khi viết các cấu hình xây dựng của họ.

Nhập cảnh

Tài liệu

Bước qua đối tượng đó, thuộc tính đầu tiên ta nhấn là entry . Điều này cho Webpack biết file nào để bắt đầu quá trình đóng gói. Bạn cũng có thể chuyển một mảng chuỗi hoặc sử dụng một đối tượng để chỉ định các phần khác nhau.

entry: './src/main.js',

// Different chunks:
entry: {
  main: './src/main.js',
  vendor: './vendor/index.js'
}

Đầu ra

Tài liệu

Phần tiếp theo phức tạp và khó hiểu hơn một chút. Thuộc tính output là nơi ta chỉ định nơi (và cách) kết thúc của (các) gói đã tạo. Vì nó được sử dụng trong mẫu, phần kết quả trông giống như sau:

output: {
  path: path.resolve(__dirname, './dist'),
  publicPath: '/dist/',
  filename: 'build.js'
},
  • path - Thư mục root cho tất cả các nội dung đã tạo. Ta sử dụng __dirname và path ở đây đảm bảo mọi thứ kết thúc ở đúng vị trí dù folder làm việc hiện tại là gì.
  • publicPath - Đây là đường dẫn mà server HTTP phát triển sẽ phục vụ nội dung của output.path . Bạn có thể cần thay đổi điều này một chút cho cài đặt cụ thể của bạn . Về cơ bản: ./dist/build.js trong hệ thống file sẽ trở thành /dist/build.js .
  • tên file - Tên của file để gói mọi thứ vào. Điều này có thể được tùy chỉnh để bao gồm một hàm băm ( build-[hash].js ) hoặc sử dụng tên chunk ( build-[name].js ) cũng như những thứ khác

Tôi nhận thấy rằng phần lớn các vấn đề của tôi xuất phát từ các phần output entry và output cấu hình sai, vì vậy, tốt hơn hết là bạn nên làm quen với những phần đó và xem xét trước nếu có vấn đề.

Mô-đun, luật và bộ tải. Ôi trời!

Bit này ở đây về cơ bản là cốt lõi của một bản dựng webpack. Bộ tải file . Bộ tải về cơ bản là các gói chuyển đổi các file nào được chuyển qua chúng thành một số dạng khác. Đây là cách tất cả những bộ xử lý tiền tuyệt vời như babel và vue-loader hoạt động với webpack.

Phần này trông có vẻ phức tạp nhưng thành thật mà nói, nó thực sự dễ đoán và dễ hiểu.

Hãy tiếp tục và bước qua từng luật :

{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
    }
    // other vue-loader options go here
  }
},

À vâng, tốt 'ol vue-loader là nước sốt bí mật của Vue.js để biến các thành phần một file tin thành JS và các chức năng hiển thị.

Đây là những gì mỗi thuộc tính làm:

  • test - Một biểu thức chính quy kiểm tra xem tên file có kết thúc bằng phần mở rộng .vue . Điều đó đảm bảo vue-loader chỉ chạy trên các file .vue .
  • bộ nạp - Tên bộ nạp sẽ sử dụng. Không có gì ngạc nhiên ở đây.
  • tùy chọn - Các tùy chọn bạn có thể chuyển cho trình nạp.

Vì vue-loader cho phép bạn thêm các trình tải khác làm trình xử lý trước cho các phần của mẫu, do đó thuộc tính options.loaders .

Định dạng của options.loaders như sau:

loaders: {
  preprocessorName: Loader Definition | Array<Loader Definition>
}

Ví dụ: nếu bạn muốn sử dụng SCSS trong các thành phần Vue, bạn sẽ đặt các options.loaders như sau:

loaders: {
  sass: [
    {
      loader: 'css-loader'
    },
    {
      loader: 'sass-loader',
      options: {
        indentedSyntax: false // Set to true to use indented SASS syntax.
      }
    }
  ]
}

Điều đó đầu tiên sẽ xử lý các kiểu bằng sass-loader để biến chúng thành CSS hợp lệ, sau đó cho phép css-loader của webpack làm bất cứ điều gì cần thiết với chúng.

Được rồi, chuyển sang luật tiếp theo. Một cho babel-loader .

Theo chỉ định của test , webpack sẽ chạy tất cả các file .js thông qua babel-loader .

Ta cũng thấy một thuộc tính mới, loại trừ . Đây là một regex cho webpack biết những mẫu nào cần bỏ qua. Trong trường hợp này, nó loại trừ mọi file .js trong node_modules .

{
  test: /\.js$/,
  loader: 'babel-loader',
  exclude: /node_modules/
},

Trình tải cuối cùng là trình tải file-loader nó lấy các file nào được nhập hoặc liên kết đến và xuất chúng trong folder kết quả .

Trong cấu hình này, nó sẽ chạy cho bốn định dạng hình ảnh phổ biến, xuất chúng trong folder xây dựng với hàm băm của nội dung file được thêm vào. (Điều này giúp bạn dễ dàng biết khi nào file đã thay đổi.) Nó cũng sửa đổi bất kỳ tham chiếu nào đến các file này để chúng bao gồm hàm băm.

Ví dụ: ./src/alligator.svg có thể trở thành ./dist/alligator.svg?uqTyWCLN8jVxGHFU4kiN1DXB0G6qzDae4Y4kFxZaP4g=

{
  test: /\.(png|jpg|gif|svg)$/,
  loader: 'file-loader',
  options: {
    name: '[name].[ext]?[hash]'
  }
}

Các bit & bob khác

Ở cuối đối tượng cấu hình là một vài thuộc tính khác. Chúng liên quan nhiều hơn đến các tính năng tùy chọn của webpack, nhưng ta hãy cùng xem xét chúng.

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.esm.js'
  }
},
devServer: {
  historyApiFallback: true,
  noInfo: true
},
performance: {
  hints: false
},
devtool: '#eval-source-map'
  • giải quyết / alias - Đối tượng resolve cho phép bạn cấu hình cách hoạt động của độ phân giải module của webpack. Trong trường hợp này, ta đặt alias gói vue thành vue/dist/vue.esm.js , cung cấp Vue ở định dạng Mô-đun ES2017.
  • devServer - devServer cho phép ta cấu hình server phát triển của webpack. Trong trường hợp này, ta chỉ yêu cầu nó quay trở lại việc gửi index.html vì lỗi 404 ( historyApiFallback ). Tất cả những noInfo thực hiện là nó ra lệnh cho webpack không xuất một loạt nội dung mà ta không cần đến terminal mỗi khi reload nóng xảy ra.
  • hiệu suất - Một thuộc tính như performance trông quan trọng phải không? Xin lỗi đã làm thất vọng. Tất cả những gì nó thực sự làm là cấu hình các gợi ý về hiệu suất của webpack, phần lớn cho ta biết khi nào ta đang group các file có kích thước lớn. Ta đang tắt nó ở đây bây giờ.
  • devtool - devtool tính devtool cho phép bạn quyết định sử dụng phương pháp ánh xạ nguồn nào. Có mười hai tùy chọn khác nhau cho việc này, khác nhau về tốc độ, chất lượng và sự sẵn sàng production . Ta đang sử dụng eval-source-map ở đây, điều này thực sự không tuyệt vời, nhưng không tạo các file mới nào hoặc sửa đổi nguồn.

Cấu hình production

Xin chúc mừng! Ta sắp hoàn thành! Phần cuối cùng của file là những thay đổi đối với cấu hình được thực hiện nếu ta đang xây dựng version production của mã. Nó trông đáng sợ hơn rất nhiều. Trên thực tế, tôi nghĩ rằng tôi sẽ chỉ ném comment vào đó thay vì viết mọi thứ ra riêng lẻ.

// Make sure to set the NODE_ENV environment variable to 'production'
// when building for production!
if (process.env.NODE_ENV === 'production') {
  // Use standard source mapping instead of eval-source-map.
  module.exports.devtool = '#source-map'

  // http://vue-loader.vuejs.org/en/workflow/production.html
  // Add these plugins:
  module.exports.plugins = (module.exports.plugins || []).concat([
    // Let's your app access the NODE_ENV variable via. window.process.env.
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),

    // Crumples your bundled source code into a tiny little ball.
    // (Minifies it.)
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),

    // This is just here for compatibility for legacy webpack plugins
    // with an options format that isn't compatible with Webpack 2.x
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

Của bạn đây! Hy vọng rằng bây giờ bạn đã biết đủ để tạo cài đặt Webpack + Vue của riêng mình.

Khi nghi ngờ, đừng ngại đọc tài liệu . Họ đã cải thiện khá nhiều gần đây.

Tags:

Các tin liên quan