Babel webpack là gì
|
Trong Series này
Chúng ta mở lại file package.json, sửa lại chút {
...
"scripts": {
+ "develop": "webpack --mode development --watch",
+ "build": "webpack --mode production"
},
...
} Với cách setup này, chỉ cần chạy npm run develop chúng ta sẽ chạy webpack ở development mode và bật tính năng detect thay đổi để chạy lại. Khi chạy npm run build chúng ta sẽ chạy webpack ở mode production, khi chạy ở mode này code sẽ được minified lại bằng Uglify JS, size nhỏ hơn khi chạy dev mode. LoadersLoaders là gì? loaders là những thư viện sẽ can thiệp trước lúc chúng ta import file, nó cho phép webpack mở rộng khả năng không chỉ còn là bundle javascript thôi, mà cả những static resource khác, như css, image, svg, ... Babel LoaderThời điểm hiện tại chắc ai cũng viết JS kiểu mới, để transpile cái ES6 mà ta viết, chúng ta sẽ cần babel-loader npm install --save-dev babel-loader @babel/core @babel/preset-env Mở lại file webpack.config.js const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
+ module: {
+ rules: [
+ {
+ test: /\.js$/,
+ exclude: /(node_modules|bower_components)/,
+ use: {
+ loader: 'babel-loader',
+ }
+ }
+ ]
+ }
} Để cấu hình cách transpile của babel, chúng ta add thêm file .babelrc vào cùng thư mục với webpack.config.js {
"presets": [
["@babel/env", {
"modules": false
}]
],
"plugins": ["syntax-dynamic-import"]
} Đoạn trên chúng ta đang cấu hình để khi Babel transpile, nó không đổi câu import và export về ES5 và cho phép import linh động, sau này dùng đến trong phần slitting code Giờ thì cứ vô tư viết ES6 nhé, vì khi bundle, webpack sẽ transpile code của chúng về thành ES5 SASS LoaderTrước tiên cài một số package để làm việc với SASS npm install --save-dev style-loader css-loader sass-loader node-sass webpack.config.js module.exports = {
...
module: {
rules: [
...
+ {
+ test: /\.scss$/,
+ use: [{
+ loader: 'style-loader'
+ }, {
+ loader: 'css-loader'
+ }, {
+ loader: 'sass-loader'
+ }]
+ }
]
}
} Mấy cái loader này sẽ được thực hiện theo thứ tự
|