Create a project
mkdir my-vue
cdMy-vue // generate package.json NPM initCopy the code
Install webpack
Yarn add webpack --dev // webpack4 separates webpack-cli from the command line tool. You need to manually install yarn add webpack -- cli --dev/to start the service. Yarn add webpack-dev-server --devCopy the code
Configuration webpack
- Create a new main.js entry file in SRC
alert('hello world! ')
Copy the code
- Create the webpack.config.js file in the root directory to configure the entry and exit. For details, see webPack’s official website
const path = require('path') const dev = process.env.webpack_dev_server module.exports = {// webpack does this for mode: dev?'development' : 'production',
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'}}Copy the code
At this point, the most rudimentary version is built, so go for a build wave
Add the build command to package.json
"scripts": {
"build": "webpack"
}
Copy the code
yarn build
Copy the code
After a successful build, we can see that there is a built main.js under dist
Generate HTML using htML-webpack-plugin
We have it packaged, but to run it in the browser, we need to generate an HTML file. We can use htMl-webpack-plugin, which generates HTML from a template and automatically references JS files
- Create a new index. HTML template file in the public folder
<! DOCTYPE html> <html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
</head>
<body>
<div id="app"></div>
</body>
</html>
Copy the code
- The installation
yarn html-webpack-plugin --dev
Copy the code
- Configuration, so far, the webPack configuration file is as follows
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin') const dev = process.env.webpack_dev_server module.exports = {// webpack does this for mode: dev?'development' : 'production',
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'my-vue',
template: 'public/index.html'}})],Copy the code
After completing the configuration, build again and find that an index. HTML file is generated under dist. When opened in the browser, the popup window displays “Hello World”, indicating that the HTML automatically introduces the packaged main.js!
Configure the development environment using webpack-dev-server
We already installed webpack-dev-server when we installed webpack above, adding commands to package.json
"scripts": {
"dev": "webpack-dev-server"
},
Copy the code
yarn dev
Copy the code
Then open localhost:8080 to see the result
Vue files are supported
- Install the Vue
yarn add vue
Copy the code
- New SRC/app. Vue
<template>
<div class="app">
{{ msg }}
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello world! '
}
}
}
</script>
Copy the code
- Modify the import file main.js
import Vue from 'vue'
import App from "./app.vue";
var vm = new Vue({
render: h => h(App)
}).$mount("#app");
Copy the code
- Install the vue – loader
yarn vue-loader vue-template-compiler
Copy the code
- Configure loader and Plugin (VueLoaderPlugin must be configured). The content of our configuration file is as follows
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const dev = process.env.WEBPACK_DEV_SERVER
module.exports = {
mode: dev ? 'development' : 'production',
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'my-vue',
template: 'public/index.html'
}),
new VueLoaderPlugin()
],
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'}}}]Copy the code
- Rerun the
yarn dev
Copy the code
Hello World can be seen, indicating that vUE files are configured and supported!!
reference
This article can only be regarded as a record of my practice, more detailed content can be referred to the following articles, but some of the following articles are outdated, I put the outdated part listed, you can pay attention to when reading!
Webpack: From getting started to real project configuration: Babel part && extract CSS part && separate code part outdated
Webpack 4 and Getting started with single-page apps: Babel is partially outdated
Understand the splitChunks series
Cache optimization