Webpack4+vue.js2 builds vue-cli

webpack + vue.js build vue-cli

First we need npm init -y to initialize the following package.json file to initialize our project

npm init -y

Then we need to install webpack and vue.js (note the vue2.x version)

cnpm install --save-dev [email protected]
   cnpm install --save-dev webpack

Then create the src folder Create the components folder under the src folder Create index.html in the root directory of the folder At this point our folder directory looks like this:

demo
     index.html
     package.json
     node_modules
     src
       components

Run through test cases

Create test.js under components

“`JavaScript

//Create a demo to test whether we can import VueTest from ‘vue/dist/vue.esm.js’; const Test=new VueTest({ el:”#app”, data:{}, conponent :{ test:{ data(){ return { tips:’Hello World’ } }, template:’

{{tips}}
‘ } } template:’

// edit webpack.config.js

const path=require(‘path’); //Introduce node’s path module, path is node’s built-in module const webpack=require(‘webpack’) module.exports={ mode: ‘none’, //Do not package entry:’./src/components/test.js’, //entry file//output path output:{ path:path.resolve(_dirname,’dist’), filename :’index.js’ }, //Public settings plugins:[ new webpack.DefinePlugin({ ‘process.env’:{ NODEENV:process.env.NODE_ENV } }) ] }

// Compile test.js by command // npx webpack

//At this time, there will be a dist folder in our file directory, and the dist folder is our packaged js file, then we will edit index.html and import the packaged js file into index.html

// index.html

webpack-dev-server (version 3.11.0)

At this point our demo is running smoothly, but we pack the code every time we develop, in order to match the version problem, so we need [email protected], [email protected]

At this point, let’s run through the following real-time updates

npx-webpack-dev-server

After starting the service, we visit localhost:8080 to change the code and find that it still cannot be updated. We need to change the index.html path

“`JavaScript

// At this point, we will change the code again and find that real-time update is realized “`

Distinguish between development environment and formal environment

At this point, let’s distinguish between the development environment and the official environment

// We need three files webpack.dev.js configuration during development webpack.prod.js official online configuration webpack.common.js public configuration

We also need a webpack-merge file to merge public files is to use public files

“`JavaScript //webpack.dev.js //Development environment configuration file const merge = require(‘webpack-merge’); //Introduce webpack-merge function module const common = require(‘./webpack. common.js’); // import webpack.common.js

module.exports = merge(common, { // Merge webpack.common.js into the current file devServer: { contentBase: “./”, // Directory of the file loaded by the local server port: “8088”, // Set the port number to 8088 inline: true, // refresh the file in real time after modification historyApiFallback: true, // do not jump hot: true // hot load} })

//webpack.prod.js

const merge = require(‘webpack-merge’); const common = require(‘./webpack.common.js’);

module.exports = merge(common, { // merge webpack.common.js into the current file plugins: [ // new CleanWebpackPlugin([‘dist’]), // folder name to be cleaned ] })

//webpack.common.js const path = require(‘path’); // Path processing module const webpack = require(‘webpack’); // This plug-in does not need to be installed, it is based on webpack and requires Introduce webpack module//public configuration file

module.exports = { entry: path.join(_dirname, “/src/components/test.js”), // entry file output: { path: path.join( _dirname, “/dist”), //The place where the packaged file is stored filename: “index.js” //The file name of the output file after packaging}, module: {

},
plugins: [

]

}

“`

Configure the package.json file

“`JavaScript “script”:{ “dev”:”webpack-deve-server –open –config webpack.dev.js”, “build”:”webpack –config webpack.pord.js” }

“`

At this point we have implemented hot updates, but we have to change the index.html file every time before updating, so we will use the plug-in html-webpack-plugin to deal with the configuration of html, css, and js

html-webpack-plugin

First install html-webpack-plugin

cnpm insall --save-dev html-webpack-plugin

Then configure it in the public file (webpack.common.js)

sample code

“`JavaScript //webpack.commont.js

plugin:{ new Html({ filrname:”index.html” ,//output file template:”template”,//template file }) }

“`

At this time, we have processed the real-time update of html, but in webpack, except js files and json files, other files cannot be recognized, so we need to use plugin extension

plugin extension

Because our components are all written in vue, we need to download the vue plugin

cnpm install --save-dev vue-html-loader //parse template
    cnpm install --save-dev vue-loader //parse vue file
    cnpm install --save-dev vue-template-compiler //Compile the content of vue

Now for the effect we need three files

main.js App.vue test.vue

“`JavaScript //main.js

import Vue from ‘vue/dist/vue.esm.js’; import App from ‘./App.vue’ new Vue({ el:’#app’, components:{App} template:\ ‘

import Test from ‘./src/components/test.vue’; export default { components:{ Test } }

//test.vue

{{tips}}
export default { data(){ return { tips:’haha’ } } } “` and then change our webpack configuration

“`JavaScript const {VueLoaderPlugin} = require(‘vue-loader’);

module.exports={ … module{ rules:[ {test:/.vue$/,use:’vue-loader’} ] }, plugins:{ …, new VueLoaderPlugin() }

} “`

At this point we can write our vue components, but in order to be more perfect, we need to remove the extension, that is, we need to write .jsm.vue when we import files, etc.

Remove the extension and take an alias

The alias is because we introduced vue in main.js to do this import Vue from ‘vue/dist/vue.esm.js’, after taking the alias we can write import vue from ‘vue’

In the webpack config do this

JavaScript resolve:{ extensions:['.js','.vue','.css','.json'], alias:{ vue:'vue/dist. esm.js' } }

Component style

We must write styles for components, but webpack cannot package css, so we need to use [email protected], style-loader2.0.0

“`JavaScript rules:[ { test:/.vue$\,lodaer:’vue-loader’,

},
 {
     test:/\.css/,loader:['style-loader','css-loader']
 }

]

“`