一、初始化webpack

  1. npm init -y
  2. npm i webpack webpack-cli -S

1-1 新建webpack.config.js

1-2 配置package.json

"scripts": {
    "build": "webpack --config webpack.config.js"
}

1-3 初次打包

const path = require("path")
const config = {
    entry:path.join(__dirname,'src/index.js'),
    output:{
        filename:"bundle.js",
        path:path.join(__dirname,'dist')
    },
    mode:"development"
}
module.exports = config

npm run build

二、配置plugins

npm i html-webpack-plugin -S
npm i clean-webpack-plugin -S

clean-webpack-plugin 
//每次打包之前会将dist目录下的文件清除
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins:[
        new CleanWebpackPlugin()
]

html-webpack-plugin
//在dist目录下自动生成html,让打包的js文件自动插入
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins:[
         ... 
        new HtmlWebpackPlugin({
            title:"webpack测试"
        })
]

三、webpack-server

npm i webpack-dev-server -S
npm i cross-env -S

3-1 配置package.json

"scripts": {
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "serve":"cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
  },

3-2 配置webpack.config.js

const isDev = process.env.NODE_ENV ==='development'
if(isDev){
    config.devServer = {
        port:8080,
        host:'0.0.0.0',
        overlay:{
            errors:true
        },
        hot:true
    }
}
//npm run serve

//判断是开发还是生产环境
plugins:[
        new CleanWebpackPlugin(),
        new htmlWebpackPlugin(),
        new webpack.DefinePlugin({
            // 这里定义在js中可以引用用于判断当前开发环境
            'process.env':{
                NODE_ENV:isDev?'"development"':'"production"'
            }
        })
    ]

//热加载
if (isDev) {
    config.devtool = '#cheap-module-eval-source-map',      
    // vue-devtools是一款基于chrome游览器的插件，用于调试vue应用
    config.devServer = {
        port: 8880,
        host: '0.0.0.0',
        overlay: {
            errors: true,
        },
        // 当修改一个组件时只修改当前的部分，不需要修改整个页面
        hot: true,          
    },
    config.plugins.push(
         // 作用：HMR插件将HMR Runtime代码嵌入到bundle中，能够操作APP代码，完成代码替换
        new webpack.HotModuleReplacementPlugin(),   
        // 作用：跳过编译时出错的代码并记录，使编译后运行时的包不会发生错误。
        new webpack.NoEmitOnErrorsPlugin()                
    )
}

四、loader

npm i css-loader style-loader -S

npm i vue-loader vue vue-template-compiler -S

4-1 配置package.json

const {VueLoaderPlugin} = require('vue-loader');
const config = {
    plugins:[
        new VueLoaderPlugin()
    ],
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },{
                test:/\.vue$/,
                use:'vue-loader'
            }
        ]
    },
    mode:"development"
}

4-2 配置src/index.js

import Vue from 'vue'
import '../assets/index.css'
import App from './App.vue'
const root = document.createElement("div");
document.body.append(root);
new Vue({
    render:h=>h(App)
}).$mount(root)

五、vue打包看效果

npm install -g serve
serve -s dist

22222222222222————-22222222222222

一、初始化webpack

npm init -y
npm i webpack webpack-cli -S

1-1 新建webpack.config.js

1-2 修改package.json文件

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

1-3 初次打包

const path = require('path');
const config  = {
    entry:path.join(__dirname,'src/index.js'),
    output:{
        /* 打包的文件名 */
        filename:"bundle.js",
        /* 打包文件的输出目录 */
        path:path.join(__dirname,'dist')
    },
    mode:"development"
}
module.exports = config;

npm run build

二、配置plugins

npm i html-webpack-plugin -S
npm i clean-webpack-plugin -S

html-webpack-plugin
//在dist目录下自动生成html,让打包的js文件自动插入
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins:[
         ... 
        new HtmlWebpackPlugin({
            title:"webpack测试"
        })
]
clean-webpack-plugin 
//每次打包之前会将dist目录下的文件清除
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins:[
        new CleanWebpackPlugin()
]

三、webpack-server

//写代码的时候就可以看到效果

npm i webpack-dev-server -S
npm i cross-env -S

3-1 配置package.json

"scripts": {
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "serve":"cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
 }

3-2 配置webpack.config.js

const isDev = process.env.NODE_ENV == 'development'
if(isDev){
    config.devServer ={
        host:'localhost',
        port:8080,
        /* 错误是否显示在界面上 */
        overlay:{
            errors:true
        },
        /* 是否进行热更新 */
        hot:true
    }
}

npm run serve

四、loader

//处理.vue .css .png|jpg

npm i css-loader style-loader -S
npm i vue-loader vue vue-template-compiler -S
npm i file-loader -S

4-1 配置webpack.config.js

const {VueLoaderPlugin} = require('vue-loader');
const config = {
    plugins:[
        new VueLoaderPlugin()
    ],
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/\.vue$/,
                use:'vue-loader'
            },
            {
                test:/\.png|jpg|gif$/i,
                use:'file-loader'
            }
        ]
    },
    mode:"development"
}

4-2 配置src/index.js

import Vue from 'vue'
import '../assets/index.css';
import App from './App.vue';
const root = document.createElement("div");
document.body.append(root)
new Vue({
    render:h=>h(App)
}).$mount(root)

npm run serve //查看效果

五、请求网络数据

npm i axios -S

<script>
import axios from 'axios'
export default {
  name: "App",
  data(){
    return {
      musics:[]
    }
  },
  mounted() {
    var url = "http://192.168.14.49:3000/top/playlist?cat=日语";
    // this.axios(url).then(res=>{
    //     console.log(res)
    // })
    axios.get(url).then(res=>{
        this.musics = res.data.playlists
    })
  }
};
</script>