webpack 配置vue项目

1.yarn安装方法：

> yarn 的安装方法：npm i -g yarn

> yarn config set registry https://registry.npm.taobao.org -g

> yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ -g

2.创建vue项目

mkdir project-vue

cd project-vue

yarn init -y

yarn add -D webpack webpack-cli

创建webpack.config.js

创建src/index.js

        console.log("hello")

yarn add vue  //把vue引入进来

yarn add -D html-webpack-plugin

3.webpack.config.js

const HtmlWebpackPlugin=require("html-webpack-plugin");

module.exports={

    mode:"development",

    entry:"./src/index.js",

    plugins:[new HtmlWebpackPlugin({

template:"./src/index.html",

title:"我是vue"

})]

}

4.创建src/index.html

html:5>Enter

    

5.npx webpack运行，dist/index.html浏览器运行一下

6.yarn add -D webpack-dev-server

package.json

"scripts": {

    "dev":"webpack-dev-server  --config webpack.config.js --open",//--open自动打开网页

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

  }

yarn dev运行

7.src/index.js

import Vue from "vue";

import App from "./App.vue";

new Vue({

    el:"#app",

    render:(h)=>h(App)

})

src/App.vue

8.yarn add -D vue-loader        //参考文档  https://vue-loader.vuejs.org/zh/guide/#vue-cli 

webpack.config.js

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

...

plugins:[

        new VueLoaderPlugin(),     //

        new HtmlWebpackPlugin({

        template:"./src/index.html"

    })],

 module:{

        rules:[{

            test:/\.vue$/,use:["vue-loader"]

        },

        {

            test: /\.js$/,

            loader: 'babel-loader'

          },

          {

            test: /\.css$/,

            use: [

              'vue-style-loader',

              'css-loader'

            ]

          }]

    }

...

并安装相应的模块：

yarn add -D babel-loader

yarn add -D @babel/core

yarn add -D css-loader

yarn add -D vue-template-compiler

//如果要使用less

yarn add -D less less-loader

对应的module的rules里添加

{

            test: /\.less$/,

            use: [

              'vue-style-loader',

              'css-loader',

              'less-loader'

            ]

          }

使用：

@color:blue;

.container{

    .title{

        background: @color;

    }

}

可以抽取公共样式，然后用@import "./style/common.less";导入

最后可以把webpack.config.js复制一份名为webpack.config.prod.js

然后mode:"production",原来的mode:"development"

然后在package.json里面对应的改：

"scripts": {

 "dev": "webpack-dev-server  --config webpack.config.js --open",

"build": "webpack --config webpack.config.prod.js"

  }