Bạn có thể sử dụng v-html
directive được sử dụng để hiển thị nội dung html tĩnh không yêu cầu bất kỳ xử lý sự kiện hoặc ràng buộc dữ liệu nào và theo
Nội dung của
span
sẽ được thay thế bằng giá trị của thuộc tínhrawHtml
, được hiểu là HTML đơn giản - các ràng buộc dữ liệu bị bỏ qua. Lưu ý rằng bạn không thể sử dụngv-html
để soạn các phần mẫu, bởi vì Vue không phải là một công cụ tạo khuôn mẫu dựa trên chuỗi. Thay vào đó, các thành phần được ưu tiên làm đơn vị cơ bản để tái sử dụng và thành phần giao diện người dùng
một giải pháp khác là sử dụng gói v-runtime-template
có trong https. //github. com/alexjoverm/v-runtime-template
Điều này có thể hữu ích cho trường hợp sử dụng của bạn, với tất cả những lo ngại thông thường về sự an toàn của các phương pháp này đối với việc tiêm độc hại
Sự hiểu biết về các thành phần tệp đơn [SFC] và Trình quản lý gói nút [NPM] của Vue sẽ hữu ích cho bài viết này
Giao diện dòng lệnh của khung, hoặc CLI, là phương pháp ưa thích để tạo ra một dự án. Nó cung cấp điểm bắt đầu của tệp, thư mục và cấu hình. Giàn giáo này cũng cung cấp một quá trình phát triển và xây dựng. Một quy trình phát triển cung cấp một cách để xem các cập nhật xảy ra khi bạn chỉnh sửa dự án của mình. Quá trình xây dựng tạo phiên bản cuối cùng của tệp sẽ được sử dụng trong sản xuất
Cài đặt và chạy Vue. js [“Vue”] có thể được thực hiện bằng thẻ script trỏ đến mạng phân phối nội dung Vue [CDN]. Không cần quá trình xây dựng hoặc phát triển. Tuy nhiên, nếu bạn sử dụng các thành phần tệp đơn Vue [SFC], bạn cần chuyển đổi các tệp đó thành thứ mà trình duyệt có thể hiểu được. Các tệp cần được chuyển đổi sang Ngôn ngữ đánh dấu siêu văn bản [HTML], Biểu định kiểu xếp tầng [CSS] và JavaScript [JS]. Trong trường hợp này, phải sử dụng quy trình phát triển và xây dựng
Thay vì dựa vào Vue CLI để dàn dựng dự án của chúng tôi và cung cấp cho chúng tôi quy trình phát triển và xây dựng, chúng tôi sẽ xây dựng một dự án từ đầu. Chúng tôi sẽ tạo quy trình xây dựng và phát triển của riêng mình bằng cách sử dụng Webpack
Webpack là gì?
Webpack là một gói mô-đun. Nó hợp nhất mã từ nhiều tệp thành một. Trước Webpack, người dùng đã bao gồm một thẻ script cho mỗi tệp JavaScript. Mặc dù các trình duyệt đang dần hỗ trợ các mô-đun ES6, nhưng Webpack vẫn tiếp tục là cách ưa thích để xây dựng mã mô-đun
Ngoài việc là một gói mô-đun, Webpack còn có thể chuyển đổi mã. Ví dụ: Webpack có thể sử dụng JavaScript hiện đại [ECMAScript 6+] và chuyển đổi nó thành ECMAScript 5. Mặc dù Webpack tự đóng gói mã nhưng nó chuyển đổi mã bằng các trình tải và plugin. Hãy coi các trình tải và plugin là tiện ích bổ sung cho Webpack
Webpack và Vue
Các thành phần tệp đơn cho phép chúng tôi xây dựng toàn bộ thành phần [cấu trúc, kiểu dáng và chức năng] trong một tệp. Và, hầu hết các trình soạn thảo mã đều cung cấp đánh dấu cú pháp và tô sáng cú pháp cho các SFC này
Lưu ý tập tin kết thúc bằng. vue. Trình duyệt không biết phải làm gì với tiện ích mở rộng đó. Webpack, thông qua việc sử dụng các trình tải và plugin, chuyển đổi tệp này thành HTML, CSS và JS mà trình duyệt có thể sử dụng
Dự án. Xây dựng ứng dụng Hello World Vue bằng các thành phần tệp đơn
Bước 1. Tạo cấu trúc dự án
Dự án Vue cơ bản nhất sẽ bao gồm HTML, JavaScript và tệp Vue [tệp kết thúc bằng. vue]. Chúng tôi sẽ đặt các tệp này vào một thư mục có tên là
{{ message }}
export default {
data[] {
return {
message: 'Hello World',
};
},
};
#app {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
0. Thư mục nguồn sẽ giúp chúng tôi tách mã chúng tôi đang viết khỏi mã mà Webpack sẽ xây dựng sau nàyVì chúng tôi sẽ sử dụng Webpack, chúng tôi cần tệp cấu hình Webpack
Ngoài ra, chúng tôi sẽ sử dụng trình biên dịch có tên là Babel. Babel cho phép chúng tôi viết mã ES6, sau đó nó sẽ biên dịch thành ES5. Babel là một trong những “tính năng bổ trợ” cho Webpack. Babel cũng cần một tệp cấu hình
Cuối cùng, vì chúng tôi đang sử dụng NPM, chúng tôi cũng sẽ có một thư mục node_modules và một gói. tập tin json. Chúng sẽ được tạo tự động khi chúng tôi khởi tạo dự án của mình dưới dạng dự án NPM và bắt đầu cài đặt các phụ thuộc của chúng tôi
Để bắt đầu, hãy tạo một thư mục có tên là
{{ message }}
export default {
data[] {
return {
message: 'Hello World',
};
},
};
#app {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
1. Từ dòng lệnh, thay đổi thư mục đó và chạy
{{ message }}
export default {
data[] {
return {
message: 'Hello World',
};
},
};
#app {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
2. Làm theo lời nhắc trên màn hình để tạo dự án. Sau đó, tạo các thư mục còn lại [ngoại trừ
{{ message }}
export default {
data[] {
return {
message: 'Hello World',
};
},
};
#app {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
3] như mô tả ở trên. Cấu trúc dự án của bạn sẽ trông như thế nàyBước 2. Cài đặt các phụ thuộc
Dưới đây là tóm tắt nhanh về các phụ thuộc mà chúng tôi đang sử dụng
vue. Khung JavaScript
vue-loader và vue-template-compiler. Được sử dụng để chuyển đổi các tệp Vue của chúng tôi thành JavaScript
gói web. Công cụ cho phép chúng tôi chuyển mã của mình qua một số phép biến đổi và gói mã đó vào một tệp
webpack-cli. Cần thiết để chạy các lệnh Webpack
webpack-dev-máy chủ. Mặc dù không cần thiết cho dự án nhỏ của chúng tôi [vì chúng tôi sẽ không thực hiện bất kỳ yêu cầu HTTP nào], chúng tôi vẫn sẽ "phục vụ" dự án của mình từ một máy chủ phát triển
babel-loader. Chuyển đổi mã ES6 của chúng tôi thành ES5. [Nó cần sự giúp đỡ từ hai phụ thuộc tiếp theo. ]
@babel/core và @babel/preset-env. Bản thân Babel không làm gì với mã của bạn. Hai “tiện ích bổ sung” này sẽ cho phép chúng tôi chuyển đổi mã ES6 của mình thành mã ES5
trình tải css. Lấy CSS mà chúng tôi viết trong tệp
{{ message }}
export default {
data[] {
return {
message: 'Hello World',
};
},
};
#app {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
4 hoặc bất kỳ CSS nào chúng tôi có thể nhập vào bất kỳ tệp JavaScript nào của mình và giải quyết đường dẫn đến các tệp đó. Nói cách khác, hãy tìm ra vị trí của CSS. Đây là một trình tải khác mà bản thân nó sẽ không làm được gì nhiều. Chúng tôi cần trình tải tiếp theo để thực sự làm điều gì đó với CSSvue-style-loader. Lấy CSS mà chúng tôi nhận được từ
{{ message }}
export default {
data[] {
return {
message: 'Hello World',
};
},
};
#app {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
5 và đưa nó vào tệp HTML của chúng tôi. Điều này sẽ tạo và chèn một thẻ kiểu vào phần đầu của tài liệu HTML của chúng tôihtml-webpack-plugin. Lấy chỉ số của chúng tôi. html và chèn tệp JavaScript đi kèm của chúng tôi vào đầu. Sau đó, sao chép tệp này vào thư mục
{{ message }}
export default {
data[] {
return {
message: 'Hello World',
};
},
};
#app {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
6rimraf. Cho phép chúng tôi, từ dòng lệnh, xóa các tệp. Điều này sẽ có ích khi chúng tôi xây dựng dự án của mình nhiều lần. Chúng tôi sẽ sử dụng điều này để xóa mọi bản dựng cũ
Hãy cài đặt các phụ thuộc này ngay bây giờ. Từ dòng lệnh, chạy
npm install vue vue-loader vue-template-compiler webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env css-loader vue-style-loader html-webpack-plugin rimraf -D
Ghi chú. “-D” ở cuối đánh dấu mỗi phụ thuộc là một phụ thuộc phát triển trong gói của chúng tôi. json. Chúng tôi đang gói tất cả các phụ thuộc vào một tệp, vì vậy, đối với dự án nhỏ của chúng tôi, chúng tôi không có phụ thuộc sản xuất
Bước 3. Tạo các tệp [Ngoại trừ tệp cấu hình Webpack của chúng tôi]
{{ message }}
export default {
data[] {
return {
message: 'Hello World',
};
},
};
#app {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
a1-Ứng dụng. vue
Vue Hello World
a1-index. htmlimport Vue from 'vue';
import App from './App.vue';
new Vue[{
el: '#app',
render: h => h[App],
}];
a1-chính. jsmodule.exports = {
presets: ['@babel/preset-env'],
}
a1-babelrc. jsCho đến thời điểm này, không có gì có vẻ quá xa lạ. Tôi đã giữ từng tệp rất cơ bản. Tôi chỉ thêm CSS và JS tối thiểu để xem quy trình làm việc của chúng tôi đang hoạt động
Bước 4. Hướng dẫn Webpack phải làm gì
Tất cả cấu hình mà Webpack cần truy cập hiện đã có. Chúng ta cần làm hai việc cuối cùng. Cho Webpack biết phải làm gì và chạy Webpack
Dưới đây là file cấu hình Webpack [______0_______7]. Tạo tệp này trong thư mục gốc của dự án. Từng dòng một chúng ta sẽ thảo luận về những gì đang xảy ra
const HtmlWebpackPlugin = require['html-webpack-plugin'];
const VueLoaderPlugin = require['vue-loader/lib/plugin'];
module.exports = {
entry: './src/main.js',
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader' },
{ test: /\.vue$/, use: 'vue-loader' },
{ test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
]
},
plugins: [
new HtmlWebpackPlugin[{
template: './src/index.html',
}],
new VueLoaderPlugin[],
]
};
a1-webpack. cấu hình. jsDòng 1 và 2. Chúng tôi đang nhập hai plugin mà chúng tôi sử dụng bên dưới. Lưu ý, các trình tải của chúng tôi thường không cần nhập, chỉ cần các plugin của chúng tôi. Và trong trường hợp của chúng tôi,
{{ message }}
export default {
data[] {
return {
message: 'Hello World',
};
},
};
#app {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
8 [mà chúng tôi sử dụng trong dòng 9] cũng cần một plugin để hoạt động [tuy nhiên, chẳng hạn như Babel thì không]Dòng 4. Chúng tôi xuất cấu hình của mình dưới dạng một đối tượng. Điều này cho phép chúng tôi truy cập vào nó khi chúng tôi chạy các lệnh Webpack
Dòng 5. Đây là mô-đun đầu vào của chúng tôi. Webpack cần một nơi để bắt đầu. Nó tìm trong tệp
{{ message }}
export default {
data[] {
return {
message: 'Hello World',
};
},
};
#app {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
9 của chúng tôi và sau đó bắt đầu xem qua mã của chúng tôi từ thời điểm đóDòng 6 và 7. Đây là đối tượng mô-đun. Ở đây, chúng tôi chủ yếu truyền vào một loạt các quy tắc. Mỗi quy tắc cho Webpack biết cách xử lý các tệp nhất định. Vì vậy, trong khi Webpack sử dụng điểm vào của
{{ message }}
export default {
data[] {
return {
message: 'Hello World',
};
},
};
#app {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
9 để bắt đầu duyệt qua mã của chúng tôi, thì nó sử dụng các quy tắc để biến đổi mã của chúng tôiDòng 8 [quy tắc]. Quy tắc này hướng dẫn Webpack sử dụng
Vue Hello World
1 trên bất kỳ tệp nào kết thúc bằng
Vue Hello World
2. Hãy nhớ rằng, Babel sẽ chuyển đổi ES6+ thành ES5Dòng 9 [quy tắc]. Quy tắc này hướng dẫn Webpack sử dụng
{{ message }}
export default {
data[] {
return {
message: 'Hello World',
};
},
};
#app {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
8 [và đừng quên plugin được liên kết ở dòng 17] để chuyển đổi các tệp
{{ message }}
export default {
data[] {
return {
message: 'Hello World',
};
},
};
#app {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
4 của chúng tôi thành JavaScriptDòng 10 [quy tắc]. Đôi khi chúng tôi muốn chuyển một tệp qua hai trình tải. Ngược lại, Webpack sẽ truyền tệp từ phải sang trái thay vì từ trái sang phải. Ở đây chúng tôi đang sử dụng hai trình tải và nói với Webpack. “lấy CSS của tôi từ tệp Vue của tôi hoặc bất kỳ tệp JavaScript nào [
{{ message }}
export default {
data[] {
return {
message: 'Hello World',
};
},
};
#app {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
5] và đưa nó vào HTML của tôi dưới dạng thẻ kiểu [
Vue Hello World
6]Dòng 11 và 12. Đóng mảng quy tắc và đối tượng mô-đun của chúng tôi
Dòng 13. Tạo một mảng plugin. Ở đây chúng tôi sẽ thêm hai plugin chúng tôi cần
Đường kẻ. 14 -16 [phần bổ trợ].
Vue Hello World
7 chiếm vị trí của chỉ mục của chúng tôi. html và thêm tệp JavaScript được đóng gói của chúng tôi vào tệp đó thông qua thẻ script. Plugin này cũng sẽ sao chép tệp HTML vào thư mục phân phối của chúng tôi khi chúng tôi xây dựng dự án của mìnhDòng 17 [phần bổ trợ].
Vue Hello World
8 làm việc với
{{ message }}
export default {
data[] {
return {
message: 'Hello World',
};
},
};
#app {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
8 của chúng tôi để phân tích các tệp
{{ message }}
export default {
data[] {
return {
message: 'Hello World',
};
},
};
#app {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
4 của chúng tôiDòng 18. Đóng mảng plugin
Dòng 19. Đóng đối tượng Webpack mà chúng tôi đang xuất
Bước 5. Thiết lập gói của chúng tôi. json để chúng tôi có thể chạy Webpack
Cấu hình của chúng tôi đã hoàn tất, bây giờ chúng tôi muốn xem ứng dụng của mình. Lý tưởng nhất là khi chúng tôi thay đổi ứng dụng của mình, trình duyệt sẽ tự động cập nhật. Điều này có thể thực hiện được với
import Vue from 'vue';
import App from './App.vue';
new Vue[{
el: '#app',
render: h => h[App],
}];
1Xóa tập lệnh
import Vue from 'vue';
import App from './App.vue';
new Vue[{
el: '#app',
render: h => h[App],
}];
2 trong tệp import Vue from 'vue';
import App from './App.vue';
new Vue[{
el: '#app',
render: h => h[App],
}];
3 của chúng tôi và thay thế nó bằng tập lệnh để phục vụ ứng dụng của chúng tôi
{
"name": "hello-world",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"serve": "webpack-dev-server --mode development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"babel-loader": "^8.0.4",
"css-loader": "^1.0.1",
"html-webpack-plugin": "^3.2.0",
"rimraf": "^2.6.2",
"vue": "^2.5.17",
"vue-loader": "^15.4.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
"dependencies": {}
}
a1-gói. jsonTên của lệnh này là sự lựa chọn của bạn. Tôi đã chọn gọi cho tôi là
import Vue from 'vue';
import App from './App.vue';
new Vue[{
el: '#app',
render: h => h[App],
}];
4 vì chúng tôi sẽ phục vụ đơn đăng ký của mìnhTừ thiết bị đầu cuối hoặc dòng lệnh của chúng tôi, chúng tôi có thể chạy
import Vue from 'vue';
import App from './App.vue';
new Vue[{
el: '#app',
render: h => h[App],
}];
5 và đến lượt nó sẽ chạy import Vue from 'vue';
import App from './App.vue';
new Vue[{
el: '#app',
render: h => h[App],
}];
6import Vue from 'vue';
import App from './App.vue';
new Vue[{
el: '#app',
render: h => h[App],
}];
7 được gọi là cờ hoặc tùy chọn. Chúng tôi chưa nói về điều này, nhưng về cơ bản, nó hướng dẫn Webpack rằng bạn đang ở chế độ phát triển. Chúng ta cũng có thể thông qua import Vue from 'vue';
import App from './App.vue';
new Vue[{
el: '#app',
render: h => h[App],
}];
8 mà chúng ta sẽ làm khi xây dựng dự án của mình. Những thứ này không nhất thiết phải có để Webpack hoạt động. Nếu không có những thứ này, bạn sẽ nhận được một thông báo cảnh báo yêu cầu bạn cung cấp một chế độ khi bạn chạy WebpackTôi nói “bắt buộc phải có” vì Webpack sẽ thu nhỏ mã của chúng tôi ở chế độ sản xuất chứ không phải ở chế độ phát triển. Vì vậy, đừng nghĩ rằng những lệnh đó không làm gì cả - chúng làm
Hãy chạy
import Vue from 'vue';
import App from './App.vue';
new Vue[{
el: '#app',
render: h => h[App],
}];
5 và xem điều gì sẽ xảy raKhi chúng tôi chạy
import Vue from 'vue';
import App from './App.vue';
new Vue[{
el: '#app',
render: h => h[App],
}];
5, chúng tôi nhận được một số đầu ra trong thiết bị đầu cuối của mình. Và, nếu mọi thứ suôn sẻVà nếu chúng ta cuộn lên một chút
Trỏ trình duyệt của bạn tới
module.exports = {
presets: ['@babel/preset-env'],
}
1. Bạn sẽ thấy thông báo Hello World màu xanh của mình bằng phông chữ RobotoBây giờ, hãy cập nhật dự án và thay đổi thông báo thành
module.exports = {
presets: ['@babel/preset-env'],
}
2. Lưu ý rằng trang web tự động làm mới. Điều đó thật tuyệt phải không? Hãy thay đổi ứng dụng một chút và bao gồm một đầu vào mà chúng ta sẽ liên kết một biến với [với
module.exports = {
presets: ['@babel/preset-env'],
}
3]. Chúng tôi sẽ xuất biến trong thẻ module.exports = {
presets: ['@babel/preset-env'],
}
4 bên dưới đầu vào. Tôi cũng đã cập nhật phần tạo kiểu để tạo kiểu cho tin nhắn ngay bây giờ. Tệp module.exports = {
presets: ['@babel/preset-env'],
}
5 của chúng ta sẽ trông như thế này
{{ message }}
export default {
data[] {
return {
message: 'Hello world!',
};
},
};
.message {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
a11-Ứng dụng. vueKhi chúng tôi phục vụ ứng dụng của mình, chúng tôi sẽ có đầu vào với thông báo _______11_______6 bên dưới nó. Đầu vào được liên kết với biến
module.exports = {
presets: ['@babel/preset-env'],
}
7, vì vậy khi chúng tôi nhập, chúng tôi sẽ thay đổi nội dung của module.exports = {
presets: ['@babel/preset-env'],
}
4. Hãy tiếp tục, nhập vào đầu vào để thay đổi nội dung module.exports = {
presets: ['@babel/preset-env'],
}
4Bây giờ hãy quay lại trình chỉnh sửa của bạn và bên dưới thẻ
module.exports = {
presets: ['@babel/preset-env'],
}
4, hãy thêm phần sauconst HtmlWebpackPlugin = require['html-webpack-plugin'];
const VueLoaderPlugin = require['vue-loader/lib/plugin'];
module.exports = {
entry: './src/main.js',
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader' },
{ test: /\.vue$/, use: 'vue-loader' },
{ test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
]
},
plugins: [
new HtmlWebpackPlugin[{
template: './src/index.html',
}],
new VueLoaderPlugin[],
]
};
1Lưu
module.exports = {
presets: ['@babel/preset-env'],
}
5 của bạn và xem điều gì sẽ xảy raconst HtmlWebpackPlugin = require['html-webpack-plugin'];
const VueLoaderPlugin = require['vue-loader/lib/plugin'];
module.exports = {
entry: './src/main.js',
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader' },
{ test: /\.vue$/, use: 'vue-loader' },
{ test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
]
},
plugins: [
new HtmlWebpackPlugin[{
template: './src/index.html',
}],
new VueLoaderPlugin[],
]
};
3 mà chúng tôi vừa cập nhật bằng cách nhập thông tin đầu vào của chúng tôi đã được hoàn nguyên về module.exports = {
presets: ['@babel/preset-env'],
}
6. Điều này là do trình duyệt thực sự làm mới và thẻ tập lệnh và trang được tải lại. Nói cách khác, chúng tôi không thể duy trì trạng thái ứng dụng của mình. Điều này có vẻ không phải là vấn đề lớn, nhưng khi bạn đang thử nghiệm ứng dụng của mình và thêm dữ liệu vào ứng dụng, sẽ rất khó chịu nếu ứng dụng của bạn "đặt lại" mỗi lần. May mắn thay, Webpack cung cấp cho chúng tôi một giải pháp gọi là Thay thế mô-đun nóngThay thế hot module là một plugin do chính Webpack cung cấp. Cho đến thời điểm này, chúng tôi chưa sử dụng chính đối tượng Webpack trong tệp cấu hình của mình. Tuy nhiên, bây giờ chúng tôi sẽ nhập Webpack để có thể truy cập plugin
Ngoài plugin, chúng tôi sẽ chuyển một tùy chọn bổ sung cho Webpack, tùy chọn
const HtmlWebpackPlugin = require['html-webpack-plugin'];
const VueLoaderPlugin = require['vue-loader/lib/plugin'];
module.exports = {
entry: './src/main.js',
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader' },
{ test: /\.vue$/, use: 'vue-loader' },
{ test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
]
},
plugins: [
new HtmlWebpackPlugin[{
template: './src/index.html',
}],
new VueLoaderPlugin[],
]
};
5. Trong tùy chọn đó, chúng tôi sẽ đặt const HtmlWebpackPlugin = require['html-webpack-plugin'];
const VueLoaderPlugin = require['vue-loader/lib/plugin'];
module.exports = {
entry: './src/main.js',
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader' },
{ test: /\.vue$/, use: 'vue-loader' },
{ test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
]
},
plugins: [
new HtmlWebpackPlugin[{
template: './src/index.html',
}],
new VueLoaderPlugin[],
]
};
6 thành const HtmlWebpackPlugin = require['html-webpack-plugin'];
const VueLoaderPlugin = require['vue-loader/lib/plugin'];
module.exports = {
entry: './src/main.js',
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader' },
{ test: /\.vue$/, use: 'vue-loader' },
{ test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
]
},
plugins: [
new HtmlWebpackPlugin[{
template: './src/index.html',
}],
new VueLoaderPlugin[],
]
};
7. Ngoài ra, chúng tôi sẽ thực hiện cập nhật [tùy chọn] cho quy trình xây dựng của mình. Chúng tôi sẽ tự động mở cửa sổ trình duyệt khi chúng tôi chạy import Vue from 'vue';
import App from './App.vue';
new Vue[{
el: '#app',
render: h => h[App],
}];
5. Chúng tôi thực hiện việc này bằng cách đặt const HtmlWebpackPlugin = require['html-webpack-plugin'];
const VueLoaderPlugin = require['vue-loader/lib/plugin'];
module.exports = {
entry: './src/main.js',
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader' },
{ test: /\.vue$/, use: 'vue-loader' },
{ test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
]
},
plugins: [
new HtmlWebpackPlugin[{
template: './src/index.html',
}],
new VueLoaderPlugin[],
]
};
9 thành const HtmlWebpackPlugin = require['html-webpack-plugin'];
const VueLoaderPlugin = require['vue-loader/lib/plugin'];
module.exports = {
entry: './src/main.js',
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader' },
{ test: /\.vue$/, use: 'vue-loader' },
{ test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
]
},
plugins: [
new HtmlWebpackPlugin[{
template: './src/index.html',
}],
new VueLoaderPlugin[],
]
};
7 cũng nằm trong tùy chọn const HtmlWebpackPlugin = require['html-webpack-plugin'];
const VueLoaderPlugin = require['vue-loader/lib/plugin'];
module.exports = {
entry: './src/main.js',
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader' },
{ test: /\.vue$/, use: 'vue-loader' },
{ test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
]
},
plugins: [
new HtmlWebpackPlugin[{
template: './src/index.html',
}],
new VueLoaderPlugin[],
]
};
5const HtmlWebpackPlugin = require['html-webpack-plugin'];
const VueLoaderPlugin = require['vue-loader/lib/plugin'];
const webpack = require['webpack'];
module.exports = {
entry: './src/main.js',
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader' },
{ test: /\.vue$/, use: 'vue-loader' },
{ test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
]
},
devServer: {
open: true,
hot: true,
},
plugins: [
new HtmlWebpackPlugin[{
template: './src/index.html',
}],
new VueLoaderPlugin[],
new webpack.HotModuleReplacementPlugin[],
]
};
a11-webpack. cấu hình. jsLưu ý rằng chúng tôi đã nhập Webpack để có thể truy cập vào
{
"name": "hello-world",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"serve": "webpack-dev-server --mode development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"babel-loader": "^8.0.4",
"css-loader": "^1.0.1",
"html-webpack-plugin": "^3.2.0",
"rimraf": "^2.6.2",
"vue": "^2.5.17",
"vue-loader": "^15.4.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
"dependencies": {}
}
2. Chúng tôi đã thêm nó vào mảng
{
"name": "hello-world",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"serve": "webpack-dev-server --mode development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"babel-loader": "^8.0.4",
"css-loader": "^1.0.1",
"html-webpack-plugin": "^3.2.0",
"rimraf": "^2.6.2",
"vue": "^2.5.17",
"vue-loader": "^15.4.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
"dependencies": {}
}
3, sau đó yêu cầu Webpack sử dụng nó với
{
"name": "hello-world",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"serve": "webpack-dev-server --mode development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"babel-loader": "^8.0.4",
"css-loader": "^1.0.1",
"html-webpack-plugin": "^3.2.0",
"rimraf": "^2.6.2",
"vue": "^2.5.17",
"vue-loader": "^15.4.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
"dependencies": {}
}
4. Chúng tôi tự động mở cửa sổ trình duyệt khi phục vụ ứng dụng với
{
"name": "hello-world",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"serve": "webpack-dev-server --mode development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"babel-loader": "^8.0.4",
"css-loader": "^1.0.1",
"html-webpack-plugin": "^3.2.0",
"rimraf": "^2.6.2",
"vue": "^2.5.17",
"vue-loader": "^15.4.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
"dependencies": {}
}
5Chạy
import Vue from 'vue';
import App from './App.vue';
new Vue[{
el: '#app',
render: h => h[App],
}];
5Cửa sổ trình duyệt sẽ mở ra và nếu bạn mở công cụ dành cho nhà phát triển của mình, bạn sẽ nhận thấy một chút thay đổi trong đầu ra. Bây giờ nó cho chúng tôi biết chức năng thay thế mô-đun nóng đã được bật. Hãy nhập thông tin đầu vào của chúng ta để thay đổi nội dung
module.exports = {
presets: ['@babel/preset-env'],
}
4. Sau đó, thay đổi thẻ
{
"name": "hello-world",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"serve": "webpack-dev-server --mode development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"babel-loader": "^8.0.4",
"css-loader": "^1.0.1",
"html-webpack-plugin": "^3.2.0",
"rimraf": "^2.6.2",
"vue": "^2.5.17",
"vue-loader": "^15.4.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
"dependencies": {}
}
8 để đọc.
{
"name": "hello-world",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"serve": "webpack-dev-server --mode development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"babel-loader": "^8.0.4",
"css-loader": "^1.0.1",
"html-webpack-plugin": "^3.2.0",
"rimraf": "^2.6.2",
"vue": "^2.5.17",
"vue-loader": "^15.4.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
"dependencies": {}
}
9Lưu tệp của bạn và chú ý điều gì sẽ xảy ra
Trình duyệt không làm mới, nhưng thay đổi
{{ message }}
export default {
data[] {
return {
message: 'Hello world!',
};
},
};
.message {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
0của chúng tôi được phản ánh. Thông báo chúng tôi đã nhập vào đầu vào vẫn còn, nhưng bản cập nhật
{
"name": "hello-world",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"serve": "webpack-dev-server --mode development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"babel-loader": "^8.0.4",
"css-loader": "^1.0.1",
"html-webpack-plugin": "^3.2.0",
"rimraf": "^2.6.2",
"vue": "^2.5.17",
"vue-loader": "^15.4.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
"dependencies": {}
}
8. Điều này cho phép ứng dụng của chúng tôi giữ trạng thái của nó trong khi chúng tôi chỉnh sửa nóBước 7. Xây dựng dự án của chúng tôi
Cho đến nay, chúng tôi đã phục vụ ứng dụng của mình. Nhưng, nếu chúng ta muốn xây dựng ứng dụng của mình để có thể phân phối nó thì sao?
Nếu bạn để ý, khi chúng tôi phục vụ ứng dụng của mình, không có tệp nào được tạo. Webpack tạo một phiên bản của các tệp này chỉ tồn tại trong bộ nhớ tạm thời. Nếu chúng tôi muốn phân phối ứng dụng Hello World của mình cho khách hàng của mình, chúng tôi cần xây dựng dự án
Điều này rất đơn giản. Giống như trước đây, chúng tôi sẽ tạo một tập lệnh trong gói của mình. json để báo cho Webpack xây dựng dự án của chúng ta. Chúng tôi sẽ sử dụng
{{ message }}
export default {
data[] {
return {
message: 'Hello world!',
};
},
};
.message {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
2 làm lệnh thay vì import Vue from 'vue';
import App from './App.vue';
new Vue[{
el: '#app',
render: h => h[App],
}];
1. Chúng tôi cũng sẽ vượt qua lá cờ import Vue from 'vue';
import App from './App.vue';
new Vue[{
el: '#app',
render: h => h[App],
}];
8Trước tiên, chúng tôi cũng sẽ sử dụng gói
{{ message }}
export default {
data[] {
return {
message: 'Hello world!',
};
},
};
.message {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
5 để xóa mọi bản dựng trước đó mà chúng tôi có thể có. Chúng tôi làm điều này đơn giản bằng cách
{{ message }}
export default {
data[] {
return {
message: 'Hello world!',
};
},
};
.message {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
6
{{ message }}
export default {
data[] {
return {
message: 'Hello world!',
};
},
};
.message {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
7 là thư mục mà Webpack sẽ tự động tạo khi xây dựng dự án của chúng ta. "Dist" là viết tắt của phân phối-i. e. chúng tôi đang “phân phối” mã ứng dụng của mìnhLệnh
{{ message }}
export default {
data[] {
return {
message: 'Hello world!',
};
},
};
.message {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
6 yêu cầu gói
{{ message }}
export default {
data[] {
return {
message: 'Hello world!',
};
},
};
.message {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
5 xóa thư mục
{{ message }}
export default {
data[] {
return {
message: 'Hello World',
};
},
};
#app {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
6. Hãy chắc chắn rằng bạn không vô tình const HtmlWebpackPlugin = require['html-webpack-plugin'];
const VueLoaderPlugin = require['vue-loader/lib/plugin'];
const webpack = require['webpack'];
module.exports = {
entry: './src/main.js',
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader' },
{ test: /\.vue$/, use: 'vue-loader' },
{ test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
]
},
devServer: {
open: true,
hot: true,
},
plugins: [
new HtmlWebpackPlugin[{
template: './src/index.html',
}],
new VueLoaderPlugin[],
new webpack.HotModuleReplacementPlugin[],
]
};
1Webpack cũng cung cấp một plugin sẽ hoàn thành quá trình dọn dẹp này có tên là
const HtmlWebpackPlugin = require['html-webpack-plugin'];
const VueLoaderPlugin = require['vue-loader/lib/plugin'];
const webpack = require['webpack'];
module.exports = {
entry: './src/main.js',
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader' },
{ test: /\.vue$/, use: 'vue-loader' },
{ test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
]
},
devServer: {
open: true,
hot: true,
},
plugins: [
new HtmlWebpackPlugin[{
template: './src/index.html',
}],
new VueLoaderPlugin[],
new webpack.HotModuleReplacementPlugin[],
]
};
2. Tôi đã chọn
{{ message }}
export default {
data[] {
return {
message: 'Hello World',
};
},
};
#app {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
6 hiển thị một cách thay thếgói của chúng tôi. tệp json sẽ trông như thế này
{
"name": "hello-world",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"clean": "rimraf dist",
"build": "npm run clean && webpack --mode production",
"serve": "webpack-dev-server --mode development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"babel-loader": "^8.0.4",
"css-loader": "^1.0.1",
"html-webpack-plugin": "^3.2.0",
"rimraf": "^2.6.2",
"vue": "^2.5.17",
"vue-loader": "^15.4.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
"dependencies": {}
}
a11-gói. jsonCó ba điều cần chú ý
- Tôi đã tạo một tập lệnh
4 riêng biệt để chúng tôi có thể chạy nó độc lập với tập lệnh xây dựng của mìnhconst HtmlWebpackPlugin = require['html-webpack-plugin']; const VueLoaderPlugin = require['vue-loader/lib/plugin']; const webpack = require['webpack']; module.exports = { entry: './src/main.js', module: { rules: [ { test: /\.js$/, use: 'babel-loader' }, { test: /\.vue$/, use: 'vue-loader' }, { test: /\.css$/, use: ['vue-style-loader', 'css-loader']}, ] }, devServer: { open: true, hot: true, }, plugins: [ new HtmlWebpackPlugin[{ template: './src/index.html', }], new VueLoaderPlugin[], new webpack.HotModuleReplacementPlugin[], ] };
5 sẽ gọi tập lệnh độc lậpconst HtmlWebpackPlugin = require['html-webpack-plugin']; const VueLoaderPlugin = require['vue-loader/lib/plugin']; const webpack = require['webpack']; module.exports = { entry: './src/main.js', module: { rules: [ { test: /\.js$/, use: 'babel-loader' }, { test: /\.vue$/, use: 'vue-loader' }, { test: /\.css$/, use: ['vue-style-loader', 'css-loader']}, ] }, devServer: { open: true, hot: true, }, plugins: [ new HtmlWebpackPlugin[{ template: './src/index.html', }], new VueLoaderPlugin[], new webpack.HotModuleReplacementPlugin[], ] };
4 mà chúng tôi đã tạoconst HtmlWebpackPlugin = require['html-webpack-plugin']; const VueLoaderPlugin = require['vue-loader/lib/plugin']; const webpack = require['webpack']; module.exports = { entry: './src/main.js', module: { rules: [ { test: /\.js$/, use: 'babel-loader' }, { test: /\.vue$/, use: 'vue-loader' }, { test: /\.css$/, use: ['vue-style-loader', 'css-loader']}, ] }, devServer: { open: true, hot: true, }, plugins: [ new HtmlWebpackPlugin[{ template: './src/index.html', }], new VueLoaderPlugin[], new webpack.HotModuleReplacementPlugin[], ] };
- Tôi có
7 trong khoảng thời gian từconst HtmlWebpackPlugin = require['html-webpack-plugin']; const VueLoaderPlugin = require['vue-loader/lib/plugin']; const webpack = require['webpack']; module.exports = { entry: './src/main.js', module: { rules: [ { test: /\.js$/, use: 'babel-loader' }, { test: /\.vue$/, use: 'vue-loader' }, { test: /\.css$/, use: ['vue-style-loader', 'css-loader']}, ] }, devServer: { open: true, hot: true, }, plugins: [ new HtmlWebpackPlugin[{ template: './src/index.html', }], new VueLoaderPlugin[], new webpack.HotModuleReplacementPlugin[], ] };
8 đếnconst HtmlWebpackPlugin = require['html-webpack-plugin']; const VueLoaderPlugin = require['vue-loader/lib/plugin']; const webpack = require['webpack']; module.exports = { entry: './src/main.js', module: { rules: [ { test: /\.js$/, use: 'babel-loader' }, { test: /\.vue$/, use: 'vue-loader' }, { test: /\.css$/, use: ['vue-style-loader', 'css-loader']}, ] }, devServer: { open: true, hot: true, }, plugins: [ new HtmlWebpackPlugin[{ template: './src/index.html', }], new VueLoaderPlugin[], new webpack.HotModuleReplacementPlugin[], ] };
2. hướng dẫn này nói. “chạy{{ message }}
8 trước, sau đó chạyconst HtmlWebpackPlugin = require['html-webpack-plugin']; const VueLoaderPlugin = require['vue-loader/lib/plugin']; const webpack = require['webpack']; module.exports = { entry: './src/main.js', module: { rules: [ { test: /\.js$/, use: 'babel-loader' }, { test: /\.vue$/, use: 'vue-loader' }, { test: /\.css$/, use: ['vue-style-loader', 'css-loader']}, ] }, devServer: { open: true, hot: true, }, plugins: [ new HtmlWebpackPlugin[{ template: './src/index.html', }], new VueLoaderPlugin[], new webpack.HotModuleReplacementPlugin[], ] };
2”{{ message }}
Hãy xây dựng dự án
const HtmlWebpackPlugin = require['html-webpack-plugin'];
const VueLoaderPlugin = require['vue-loader/lib/plugin'];
const webpack = require['webpack'];
module.exports = {
entry: './src/main.js',
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader' },
{ test: /\.vue$/, use: 'vue-loader' },
{ test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
]
},
devServer: {
open: true,
hot: true,
},
plugins: [
new HtmlWebpackPlugin[{
template: './src/index.html',
}],
new VueLoaderPlugin[],
new webpack.HotModuleReplacementPlugin[],
]
};
5Webpack tạo một thư mục
{{ message }}
export default {
data[] {
return {
message: 'Hello World',
};
},
};
#app {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
6 và mã của chúng tôi nằm bên trong. Vì mã của chúng tôi không yêu cầu HTTP, nên chúng tôi chỉ cần mở tệp {
"name": "hello-world",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"clean": "rimraf dist",
"build": "npm run clean && webpack --mode production",
"serve": "webpack-dev-server --mode development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"babel-loader": "^8.0.4",
"css-loader": "^1.0.1",
"html-webpack-plugin": "^3.2.0",
"rimraf": "^2.6.2",
"vue": "^2.5.17",
"vue-loader": "^15.4.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
"dependencies": {}
}
4 trong trình duyệt của mình và nó sẽ hoạt động như mong đợiNếu chúng tôi có mã đang thực hiện các yêu cầu HTTP, thì chúng tôi sẽ gặp phải một số lỗi liên kết nguồn gốc khi chúng tôi thực hiện các yêu cầu đó. Chúng tôi sẽ cần chạy dự án đó từ một máy chủ để nó hoạt động
Hãy kiểm tra
{
"name": "hello-world",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"clean": "rimraf dist",
"build": "npm run clean && webpack --mode production",
"serve": "webpack-dev-server --mode development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"babel-loader": "^8.0.4",
"css-loader": "^1.0.1",
"html-webpack-plugin": "^3.2.0",
"rimraf": "^2.6.2",
"vue": "^2.5.17",
"vue-loader": "^15.4.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
"dependencies": {}
}
4 mà Webpack đã tạo trong trình duyệt và trình chỉnh sửa mãNếu chúng tôi mở nó trong trình chỉnh sửa của mình hoặc xem mã nguồn trong các công cụ dành cho nhà phát triển của chúng tôi, bạn sẽ thấy Webpack đã thêm thẻ script. Tuy nhiên, trong trình chỉnh sửa của chúng tôi, bạn sẽ không thấy các kiểu vì thẻ kiểu được thêm động vào thời gian chạy bằng JavaScript
Ngoài ra, lưu ý rằng thông tin bảng điều khiển phát triển của chúng tôi không còn nữa. Điều này là do chúng tôi đã chuyển cờ
{
"name": "hello-world",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"clean": "rimraf dist",
"build": "npm run clean && webpack --mode production",
"serve": "webpack-dev-server --mode development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"babel-loader": "^8.0.4",
"css-loader": "^1.0.1",
"html-webpack-plugin": "^3.2.0",
"rimraf": "^2.6.2",
"vue": "^2.5.17",
"vue-loader": "^15.4.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
"dependencies": {}
}
6 cho WebpackPhần kết luận
Hiểu quy trình xây dựng đằng sau các khung bạn sử dụng sẽ giúp bạn hiểu rõ hơn về chính khung đó. Hãy dành chút thời gian để cố gắng xây dựng một Dự án Angular, React hoặc Vue khác mà không cần sử dụng CLI tương ứng. Hoặc, chỉ cần xây dựng một trang web ba tệp cơ bản [chỉ mục. html, phong cách. css và ứng dụng. js], nhưng sử dụng Webpack để phân phát và xây dựng phiên bản sản xuất
Cảm ơn vì đã đọc
woz
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
Đọc thêm bài viết
Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn
Học cách viết mã miễn phí. Chương trình giảng dạy nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có việc làm với tư cách là nhà phát triển. Bắt đầu