preface

As a modern front-end, webpack is more or less familiar, but we usually build projects directly using scaffolding tools, automatically integrated with Webpack, we are not familiar with how to build a Webpack project from 0 to 1. So let’s build a Webpack-based VUE plug-in hand in hand today, I believe that in this process we can have a deeper understanding of the use of Webpack.

Environment to prepare

  • Node version >= 10.13.0

Initialize the project

  1. Create the project directory mkdir vue-plugin-demo && CD vue-plugin-demo

  2. Initialize to NPM package NPM init

  3. NPM install –save-dev webpack webpack-cli cross-env

Webpack-cli is a dependency on the Webpack command line tool, cross-env for cross-platform setup and use of environment variables.

Verify that webPack is installed successfully

  1. Create a SRC directory under the project root directory and create index.js, mkdir SRC && touch SRC /index.js

  2. Write some random code in it:

Export default function Foo() {console.log(' young people want to learn about wu ')} Foo()Copy the code
  1. Create one in the project root directorybuildDirectory and create a WebPack configuration filewebpack.dev.js.mkdir build && touch build/webpack.dev.js
// build/webpack.dev.js
module.exports = {
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: "[name].js",
        libraryTarget: 'umd',
        umdNamedDefine: true
    }
}
Copy the code
  1. Add the command to the scripts of package.json:
{... "scripts": { "dev": "webpack --config build/webpack.dev.js" } ... }Copy the code
  1. Execute the commandnpm run devIf you verify the package, you’ll see that there’s a dist folder in the root directory, and main.js is the packaged file.

Write vUE plug-ins

  1. Create a component touch SRC /my-component.vue under SRC

    // SRC /my-component.vue <template> <div class="my-component"> <span> My first vue plugin </span> </div> </template> <script> export  default { name: "MyComponent" } </script> <style scoped lang="stylus"> .my-component { span { font-size: 20px; color: red; } } </style>Copy the code

    CSS preprocessing uses the Stylus, so you need to install the appropriate WebPack Loader.

    // src/index.js
import MyComponent from './my-component.vue'
import Vue from 'vue'

const plugin = {
    install: function(Vue, options) {
        Vue.component(MyComponent.name, MyComponent)
    }
}

export default plugin
Copy the code

  2. Install vue, vue-loader, and vue-template-compiler. NPM install –save-dev vue-loader vue vue-template-compiler

    Vue-loader parses. Vue files. Vue-template-compiler compiles template templates

  3. Install stylus, stylus-loader, csS-loader, and NPM install –save-dev stylus stylus-loader CSs-loader

  4. Configuration webpack. Dev. Js

    // build/webpack.dev.js const VueLoaderPlugin = require('vue-loader/lib/plugin') modele.exports = { ... module: { rules: [{ test: /\.vue$/, loader: 'vue-loader' }, { test: /\.styl(us)?$/, use: [ 'vue-style-loader', { loader: 'css-loader', options: { esModule: false } }, 'stylus-loader' ] }] }, plugins: [// This plugin is required! For example, if you have a rule that matches /\.js$/, it will be applied to the <script> block new VueLoaderPlugin()... }Copy the code

    1. Vue-style-loader depends on vue-style-loader, so you do not need to install vue-style-loader repeatedly

    2. The esModule of csS-loader must be set to false. Otherwise, the CSS styles are invalid. For details, see blog.csdn.net/vv_bug/arti…

  5. Run the NPM run dev command to check whether the configuration is successful

Write test code

  1. NPM install –save-dev webpack-dev-server html-webpack-plugin

  2. Create webpack.demo.js, touch build/webpack.demo.js

    // build/webpack.demo.js const path = require('path') const VueLoaderPlugin = require('vue-loader/lib/plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode: process.env.NODE_ENV, entry: './example/main.js', output: { filename: '[name].js' }, module: { rules: [{ test: /\.vue$/, loader: 'vue-loader' }, { test: /\.styl(us)?$/, use: [ 'vue-style-loader', { loader: 'css-loader', options: { esModule: false } }, 'stylus-loader' ] }] }, plugins: [ new VueLoaderPlugin(), new HtmlWebpackPlugin({ template: './example/index.html' }) ], devServer: { contentBase: path.resolve(__dirname, '.. /example/dist'), port: 8080 }, resolve: { alias: { main: path.resolve(__dirname, '.. /src') } } }Copy the code

  3. Json file, “demo”: “cross-env NODE_ENV=development webpack serve –progress –config build/webpack.demo.js”

  4. Create the test file mkdir example && touch example/main.js && touch example/index.html

    // example/main.js
import MyComponent from 'main/index.js'
import Vue from 'vue'

Vue.use(MyComponent)

new Vue({
    render(h) {
        return h('my-component')
    }
}).$mount('#app')
Copy the code
    // example/index.html <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <div id="app"></div> </body> </html>Copy the code

  5. Run NPM run demo, and then go to http://localhost:8080/

Test with NPM Link

  1. Build NPM run dev

  2. npm link

  3. Link to the test project, NPM link vue-plugin-demo

  4. Used in test projects

conclusion

The first time without scaffolding to build front-end engineering will encounter a lot of pits, only to do it again to be able to master, finally with demo address github.com/775146061/v…