In 9102, webpack4 set up vue project

preface

First of all, I wish you a happy Lantern Festival. Recently, I haven’t written any articles for a long time. I just went to work these days and the leaders haven’t come yet, so I secretly wrote a blog about webpack vUE. Since companies use A lot of VUE, building vUE projects using VUE-CLI is a bit bloated, and I felt it was better to configure them myself, so I came up with this tutorial. Because the level is limited, we welcome you to correct, progress together.

New project

1. Create a folder named WebPackConfig

2. Run commands

npm init -yCopy the code

Generate package.josn in the WebPackConfig folder

3. Download the dependency package

npm i webpack webpack-dev-server webpack-cli -DCopy the code

4. Create a SRC folder and create the main.js file in SRC

alert(1)Copy the code

5. Create the webpack.config.js file

Webpack. Config. Js file

var path = require('path');
var config = {    
                entry: './src/main.js'.output: {       
                    path: path.resolve(__dirname + '/dist'),// Package the build file address
                    filename: '[name].build.js'.// Generate file Ming
                    publicPath: '/dist/'// Public path for file output}}module.exports = config;
Copy the code

Entry: Entry file. Object writing allows you to import multiple files

  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }Copy the code

Output: indicates the file output address

Path: indicates the address of the output file

Filename: indicates the output filename

PublicPath: indicates the file output path

6. Create an index. HTML file and import main.js


       <html lang="en">
<head>    
    <meta charset="UTF-8">    
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">    
    <meta http-equiv="X-UA-Compatible" content="ie=edge">    
    <title>Document</title>
</head>
<body>    
    <script src="/dist/main.build.js"></script>
</body>
</html>Copy the code

7. The configuration package. Json

"dev": "webpack-dev-server --open --hot"."build": "webpack --mode=development --progress --hide-modules".Copy the code

Run after configuration

npm run devCopy the code

A service opens and a 1 pops up

Webpack does have a warning, however, because mode is not configured

Mode has two parameters, one is development mode and the other is production mode.

It can be configured directly in package.json

"dev": "webpack-dev-server --mode=development --open --hot"Copy the code

So there’s no warning

Run next

npm run buildCopy the code

A new dist folder is generated by packaging

8. Import the Loader compatible code

npm i babel-loader babel-core babel-preset-env -DCopy the code

Babel-preset -env helps us configure Babel. All we need to do is tell it what we want to be compatible with (the target runtime environment), and it will automatically convert the code to be compatible with the corresponding environment.

Change the webpack.config.js file

module: {
    rules: [{test: '/\.js$/'.include: path.resolve(__dirname + '/src'),
            exclude: /node_modules/.use: [{loader: 'babel-loader'.options: ['env']}]}Copy the code

9. Download vue and import it in main.js

import Vue from 'vue';
new Vue({    
  el: '#app'.data: {        
     msg: 'hello'}})Copy the code

Error running project discovery

vue.runtime.esm.js:620 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)
Copy the code

Resolve. Alias: resolve. Alias: resolve. Alias: resolve. Alias: resolve

resolve: {        
  alias: {            
    'vue$': 'vue/dist/vue.esm.js'.The '@': path.resolve(__dirname, '/src')}}Copy the code

Then when you run the project, you see that Hello has been printed out on the page.

A simple WebPack-based VUE project has been set up.

Here are some configurations

10. The configuration of CSS

Enter the style-loader command to download the CSS -loader

npm i style-loader css-loader -DCopy the code

Configure rules in the Module

{  
  test: /\.css$/.use: ['style-loader'.'css-loader'].include: path.resolve(__dirname + '/src/'),  
  exclude: /node_modules/
}Copy the code

To test importing CSS, create index.css and import it in main.js

index.css

div{ color:skyblue; }Copy the code

import './index.css';Copy the code

You can see that the text color has changed

11. Support images

Run the file-loader url-loader command to download file-loader

npm i file-loader url-loader -DCopy the code

Configure rules in the Module

{   
  test: /\.(jpg|png|gif|svg)$/,   
  use: 'url-loader',   
  include: path.resolve(__dirname + '/src/'),   
  exclude: /node_modules/ 
}Copy the code

To test importing images, create a new asset folder and place an image in main.js

import img from'./assets/a.png'Copy the code

Display in HTML

<img :src="img" alt="">Copy the code

12. The introduction of HTML – webpack – the plugin

Enter the command to download the html-webpack-plugin

npm i html-webpack-plugin -DCopy the code

Set the plugins

var HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [ 
  new HtmlWebpackPlugin({    
    template: './index.html'.chunks: ['main'"})"Copy the code

13. Vue development is required. Vue files only need to introduce VUe-Laoader and VUe-template-compiler

Run the vue-loader vue-style-loader vue-template-compiler command to download the vue-loader template compiler

npm i vue-loader vue-style-loader vue-template-compiler -DCopy the code

Configure the vue – loader

{  
  test: '/\.vue$/'.loader: 'vue-loader'
}Copy the code

Vue-loader /lib/plugin also needs to be introduced

var VueLoaderPlugin = require('vue-loader/lib/plugin');Copy the code

Instantiate in plugin

new VueLoaderPlugin()Copy the code

The new App. Vue

<template> <h1>Hello World! </h1></template> <script>export default {    name: 'App'  }</script>
<style></style>Copy the code

Change the main js

import Vue from 'vue'; import App from'./App.vue';
new Vue({  el: '#app',  render: h => h(App)});Copy the code

Run the project

14. Enable JS hot update

Because vue-style-loader encapsulates style-loader, hot update is out of the box, but JS hot update is not available. Every time we modify the code, we will refresh the browser, so we need to continue to configure.

const webpack = require('webpack');Copy the code

And configure it in plugin

new webpack.HotModuleReplacementPlugin()Copy the code

Hot update is enabled

So far the VUE project built by WebPack is up and running.

And then there are some optimizations,

15. Configure the alias in Resolve

resolve: {    
  extensions: ['.js'.'.jsx'.'.ts'.'.tsx'.'.scss'.'.json'.'.css'].alias: {        
    'vue$': 'vue/dist/vue.esm.js'."@": path.resolve(__dirname, 'src'),        
    "components": path.resolve(__dirname, '/src/components'),        
    "utils": path.resolve(__dirname + '/src/utils'),},modules: ['node_modules']}Copy the code

16. Support sass

Enter the command to download sass-loader node-sass

npm i sass-loader node-sass -D
Copy the code

Modify the CSS for webpack.config.js

{   
  test: /\.sass$/,   
  use:['vue-style-loader'.'css-loader'.'sass-loader' 
  ],   
  include: path.resolve(__dirname + '/src/'),    
  exclude: /node_modules/ 
},Copy the code

The basic configuration is almost the same, but also need to add some things, will add later.

This article is the foundation for webpack to build VUE project, and it will be supplemented and further in-depth in the next one. Thank you, and I hope you can give us more suggestions and go further and further on the road of code farming

Grateful cheat point star project address github.com/mr-mengbo/w…