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