webpack learn1-初始化项目1

使用Visual Studio Code软件使用准备,先安装一些插件,加快开发效率(还有Language Packs 选择简体中文安装后重启软件,可切换为中文):

下面是项目初始化步骤:

1 软件打开终端:在指定目录输入

npm init

2 再输入

npm i webpack vue vue-loader

3 然后根据提醒warn安装需要的依赖(比如css-loader和vue-template-compiler)

npm i css-loader vue-template-compiler

4 建立文件夹src放源码,在src下建立app.vue文件

在app.vue中输入:

<template>

    <div id="test">{{text}}</div>

</template>

<script>

export default {

    data() {

        return {

            text: 'abc'

        }

    }

}

</script>

<style>

#test {

    color: red;

}

</style>

在项目目录下建立webpack.config.js文件,内容:)

const path = require('path')

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {

  entry: path.join(__dirname,'src/index.js'),

  output: {

    filename: 'bundle.js',

    path: path.join(__dirname,'dist')

  },

  module: {

    rules: [

      {

        test: /.vue$/,

        loader: 'vue-loader'

      },{

        test:/.css$/,

        loader: ['css-loader']

      }

    ]

  },

  plugins:[

      new VueLoaderPlugin()

  ]

}

在src目录下建立index.js文件

import Vue from 'vue'

import App from './app.vue'

const root = document.createElement('div')

document.body.appendChild(root)

new Vue({

  render: (h) => h(App)

}).$mount(root)

在package.json文件中script中增加一行代码: "build": "webpack --config webpack.config.js --mode development"

"scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "build": "webpack --config webpack.config.js --mode development"

  }

5 然后在终端输入npm run build

出现错误还有可能需要安装vue-template-compiler

巴特西

webpack learn1-初始化项目1

最新文章

热门文章