webpack打包配置/路由组件打包、路由打包

/*
配置一个webpack，需要安装  webpack webpack-cli
yarn add webpack webpack-cli -D 或者 npm install webpack webpack-cli -D

先配置一个 package.json  yarn init 或者 npm init 一路回车，或者 -y

创建webpack.config.js，一般的要运行一个webpack项目，则需要在根目录下配置webpack.config.js，
同时他也是webpack的默认配置文件

配置完成webpack.config.js以后，需要在package.json中的scripts属性中设置启动，例如
"scripts":{
    "aa":"webpack --config webpack.config.js"
}
这样就可以使用webpack打包，yarn aa 或者 yarn run aa 或者 npm run aa

配置开发服务器，需要先安装 webpack-dev-server
yarn add webpack-dev-server -D 
安装完成以后，在package.json中scripts设置 "serve":"webpack-dev-server"
启动服务就是 npm run serve 或者 yarn serve 或者 yarn run serve


webpack的两个重点 插件 和 加载器，插件和加载器都需要安装

所有的插件，都执行在 plugins属性里面
所有的加载器都执行在 module 里面

如果需要针对HTML打包，则需要使用 html-webpack-plugin 插件
如果需要把之前打包的内容清空，则需要使用 clean-webpack-plugin 插件

加载器 loader，用来预处理需要加载的文件资源
加载css 需要引入 css-loader或者style-loader
加载图片或者其他文件资源 需要引入 url-loader和file-loader
如果需要在HTML上加载图片，则需要使用 html-withimg-loader

*/
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const path = require('path');
//引入webpcak
const webpack = require('webpack');

module.exports = {
    entry:'./src/index.js', //要打包的文件入口
    output:{ //设置出口
        filename:'main.js', //main.[hash:8].js设置打包后的文件名，[hash:8]表示显示8位哈希码，
        避免重复
        path: path.resolve('./asd'), //path 方法，相对路径转绝对路径
    },
    devServer:{ //配置服务器
        contentBase:'./asd', //配置服务器读取文件的地址
        port:'3000', //配置服务器端口
        compress:true, //在服务端压缩
        // open:true, //启动完成后，是否自动在浏览器打开,；
        类似 "serve": "webpack-dev-server --open"
        hot:true, //热替换，只要有修改，就会立即更新
    },
    //配置插件,plugins是一个数组，数组里面的每一个元素都是一个插件
    plugins:[
        new CleanWebpackPlugin(), //清空之前打包的代码

        new HtmlWebpackPlugin({
            template:"./src/index.html",
            //配置压缩属性
            minify:{
                removeAttributeQuotes:true, //是否去掉双引号
                collapseWhitespace:true,// 是否不换行
            },
            //静态资源引入的位置 默认在head里面，它的值有body和head，如果值为false的时候，
            则不引入静态资源
            inject:'body'
        }),
        //使用插件更简单的操作热更新
        new webpack.HotModuleReplacementPlugin()
    ],
    module:{
        //使用rules设置解析规则，主要解析@import语法
        rules:[
            {
                test:/\.html$/,
                use:['html-withimg-loader']
            },

            /*
            loader 如果loader是一个单纯的字符串，说明解析该文件只用了一个loader
            如果使用多个loder，则可以使用use里面存入对象的方式，当然如果没有其他设置，
            use里面可以存放具体的loader字符串
            use中的loader 从后向前执行
            如下例，先解析css，然后再把css插入到head中，
            style-loader 的作用就是把css插入到head中

            loader的基本用法模式
            {
                test：文件格式，
                use：[解析文件的loader....]
            }

            */
            {
                test:/\.css$/,//解析的文件格式
                use:[
                    {loader:'style-loader'},
                    {loader:'css-loader'}
                ]
            },
            /*
            解析图片
            */
            {
                test:/\.(png|jpg|gif)$/,
                use:[
                    {
                        loader:'url-loader',
                        //设置其他参数
                        options:{
                            esModule:false, //设置这个以后，html-withimg-loader 才可以使用
                            limit:true,
                            outputPath:'./images'
                        }
                    }
                ]
            }
        ]
    },
    mode:'development', //设置开发环境模式
};

require.context

为webpack的一个方法，一般用来打包文件夹中的组件

路由打包

const aa=require.context('../', true, /\.stories\.js$/);
// （创建出）一个 context，其中所有文件都来自父文件夹及其所有子级文件夹，request 以 `.stories.js` 结尾。
let routeArr=[]
//此导出函数有三个属性：resolve, keys, id。一般通过keys 去获得一个数组，
各项为routes组件的路径

aa.keys().forEach(element=>{
routeArr.push(aa(element).default)
})
const routes=[,,,...routeArr]

###组件打包

import Vue from 'vue'
import Vuex from 'vuex'
import Data from '@/data/data.js'
const path = require('path');

// import A from './modules/a';
// import B from './modules/b';
// import C from './modules/c';

Vue.use(Vuex)

//自动化模块
const modulesFun = require.context('./modules',true,/\.js$/);
const modulesObj = {};
modulesFun.keys().forEach(item=>{
  console.log(item); // ['./sdf//sd/sdfa.js','./b.js','./c.js']
  // 获取每一个模块的内部结构
  console.log(modulesFun(item).default); // { state:{},mutaitons:{} ... }
  //获取每一个item中的文件名
  let fileName = path.basename(item,'.js');
  console.log(fileName);
  //把每一个模块都添加到对象中
  modulesObj[fileName]=modulesFun(item).default;
});

console.log(modulesObj);

export default new Vuex.Store({
  state: {
    name:'南村群童欺我老无力',
    myData:Data.list
  },
  mutations: {
    change(state){
      state.name = state.name + '对面搞破坏';
    }
  },
  actions: {
    show(context){
      context.commit('change');
    }
  },
  modules: {
    // A:A,B:B,C:C
    ...modulesObj
  }
})