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.創(chuàng)建vue項(xiàng)目
mkdir project-vue
cd project-vue
yarn init -y
yarn add -D webpack webpack-cli
創(chuàng)建webpack.config.js
創(chuàng)建src/index.js
????????console.log("hello")
yarn add vue? //把vue引入進(jìn)來
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.創(chuàng)建src/index.html
html:5>Enter
<body>
????<div?id="app"></div>
</body>
5.npx webpack運(yùn)行，dist/index.html瀏覽器運(yùn)行一下
6.yarn add -D webpack-dev-server
package.json
"scripts":?{
????"dev":"webpack-dev-server??--config?webpack.config.js --open",//--open自動打開網(wǎng)頁
????"build":"webpack?--config?webpack.config.js"
??}
yarn dev運(yùn)行
7.src/index.js
import?Vue?from?"vue";
import?App?from?"./App.vue";
new?Vue({
????el:"#app",
????render:(h)=>h(App)
})
src/App.vue
<template>
????<h1>Hello?Vue</h1>
</template>
<script>
export?default?{
}
</script>
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'
????????????]
??????????}]
????}
...
并安裝相應(yīng)的模塊：
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
對應(yīng)的module的rules里添加
{
????????????test:?/\.less$/,
????????????use:?[
??????????????'vue-style-loader',
??????????????'css-loader',
??????????????'less-loader'
????????????]
??????????}
使用：
<style?lang="less">
@color:blue;
.container{
????.title{
????????background:?@color;
????}
}
可以抽取公共樣式，然后用@import?"./style/common.less";導(dǎo)入
最后可以把webpack.config.js復(fù)制一份名為webpack.config.prod.js
然后mode:"production",原來的mode:"development"
然后在package.json里面對應(yīng)的改：
"scripts":?{
?"dev":?"webpack-dev-server??--config?webpack.config.js?--open",
"build":?"webpack?--config?webpack.config.prod.js"
??}
